Søg
Avatar billede angelenglen Nybegynder
20. juli 2007 - 12:07 Der er 9 kommentarer og
1 løsning

billede resize der overholder aspect ratio

Jeg har brug for at vise billeder i et table der har en bestemt størrelse.

i den forbindelse har jeg givet det første billede et id="stortbillede" og så ændrer jeg src på det via:
document.getElementById("stortbillede").src

jeg har så (efter beregningerne) sat højde og bredde ud via:
document.getElementById("stortbillede").height
document.getElementById("stortbillede").width

det funger er også fint, men det er et problem hvis billedet er større end der er plads til.

Jeg har derfor brug for et script der får leveret følgende parametre:
billede-url (til det billede der skal sættes ind som src)
billede-height (billedets faktiske højde, fx 1024)
billede-width (billedets faktiske bredde, fx 768)
billede-maxheight (max højde billedet må have, fx 154)
billede-maxwidth (max bredde billedet må have, fx 160)

-scriptet skal så først beregne hvad højde og bredde billedet må have, det skal være så stort som muligt, men stadig indenfor max-parametrene, og det skal overholde aspect-ratio - hvis billedet fx har størrelsen: 100x1540 (altså et meget højt billede) skal det vises med størrelsen 10x154 px fordi max-bredde er 154px, og skalering dertil ville give 10 i bredde ved overholdelse af spect-ratio.

på samme måde skulle et meget bredt billede resultere i et 160px bredt billede, der ikke er så højt.

jeg har selv forsøgt en del, men jeg har til sidst givet op - ligemeget hvad jeg har gjort, er der altid en eller anden kombination der resulterer i et strukket billede der ikke overholder aspect ratio, eller et billede der ender med at være for stort til at være indenfor grænserne.
Avatar billede mclemens Nybegynder
20. juli 2007 - 18:45 #1
Sådan ?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
rez={
'stortbillede':[160,300],
'billede2':[80,50],
'billede3':[200,250]
}; // Højde,bredde

rezid=['stortbillede','billede2','billede3']

function rezmax(e){
  elm=document.getElementById(e);
  ew=elm.offsetWidth;
  eh=elm.offsetHeight;

  em=ew/eh;
  em2=rez[e][0]/rez[e][1];
  if(em<em2){
    elm.style.height=Math.round(rez[e][1]*em)+"px";
    elm.style.width="auto";
  }else if(em>em2){
    elm.style.width=Math.round(rez[e][0]*em)+"px";
    elm.style.height="auto";
  }else{
    elm.style.height=rez[e][1]+"px";
    elm.style.width="auto";
  } 
}

window.onload=function(){
  for(i=0;i<rezid.length;i++)rezmax(rezid[i]);
}
</script>

</head><body>
<img src="http://www.eksperten.dk/img/elogo.png" id="stortbillede"><br><br>
<img src="http://www.eksperten.dk/img/elogo.png" id="billede2"><br><br>
<img src="http://www.eksperten.dk/img/elogo.png" id="billede3"><br>
</body></html>
Avatar billede mclemens Nybegynder
20. juli 2007 - 18:47 #2
Alternativt, hvis det ikke skulle virke i IE under 7
kan du lege med css max-height og css max-width:


<img src="http://www.eksperten.dk/img/elogo.png" style="max-height:50px;max-width:100px;"><br><br>
<img src="http://www.eksperten.dk/img/elogo.png" style="max-height:100px;max-width:30px;"><br><br>
<img src="http://www.eksperten.dk/img/elogo.png" style="max-height:80px;max-width:200px;"><br>
Avatar billede angelenglen Nybegynder
22. juli 2007 - 13:17 #3
Umiddelbart ser dit script interessant ud, men jeg kan ikke gennemskue det nok til at lave det om til mit formål.

jeg har brug for et script der kaldes med følgende parametre:
resize(url, height, width, maxheight, maxwidth){
  //indsæt script her
}

jeg har leget en del med dit script i et par dage nu, men jeg kan ikke få det til at makke ret.
Avatar billede mclemens Nybegynder
22. juli 2007 - 14:20 #4
Jeg formoder at du mener at den skal ændre src på et
eksisterende billede og så loade billedet samt skalere det ?



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
rez={
'stortbillede':[160,300],
'billede2':[80,50],
'billede3':[200,250]
}; // Højde,bredde

rezid=[
'stortbillede','http://www.eksperten.dk/img/elogo.png'
,'billede2','http://www.eksperten.dk/img/flag_yellow.gif'
,'billede3','http://www.eksperten.dk/img/elogo.png']

function rezmax(e){
  elm=document.getElementById(e);
  ew=elm.offsetWidth;
  eh=elm.offsetHeight;

  em=ew/eh;
  em2=rez[e][0]/rez[e][1];
  if(em<em2){
    elm.style.height=Math.round(rez[e][1]*em)+"px";
    elm.style.width="auto";
  }else if(em>em2){
    elm.style.width=Math.round(rez[e][0]*em)+"px";
    elm.style.height="auto";
  }else{
    elm.style.height=rez[e][1]+"px";
    elm.style.width="auto";
  }
}

window.onload=function(){
  for(i=0;i<rezid.length;i++){
    e=document.getElementById(rezid[i]);
    e.setAttribute("src",rezid[++i]);
    e.onload=function(){rezmax(this.id)}
  }
}
</script>

</head><body>
<img src="intet.jpg" id="stortbillede"><br><br>
<img src="intet.jpg" id="billede2"><br><br>
<img src="intet.jpg" id="billede3"><br>
</body></html>
Avatar billede angelenglen Nybegynder
22. juli 2007 - 17:52 #5
well den måde jeg ville kalde den på var noget i stil med:

<img id="stortbillede" src="http://www.eksperten.dk/img/epro.png" height="160" width="160">
<a href="#" onclick="resize('http://www.eksperten.dk/img/elogo.png',990,1100,160,154)">test1</a>
<a href="#" onclick="resize('http://newz.dk/templates/newz-gfx1/gfx/newz-logo.gif',184,50,160,154)">test1</a>
<a href="#" onclick="resize('http://www.reuters.com/resources/images/refreshLogo.gif',187,65,160,154)">test1</a>

<script>
resize(url,width,height,maxwidth,maxheight) {
document.getElementById("stortbillede").src = url

//beregn ny height og width her, og gem i newHeight og newWidth

document.getElementById("stortbillede").height = newHeight;
document.getElementById("stortbillede").width = newWidth;

}


-men jeg kan ikke få dit script til at fungere på den måde, jeg forstår ikke din brug af "eksterne" arrays osv.
Avatar billede mclemens Nybegynder
22. juli 2007 - 18:11 #6
Når det kaldes via onclick's med defineret width og height
er det ikke nødvendigt med den onload handler til beregning
af nye width og height dimensioner.

Når maxwidth og height defineres i opkaldet til ændringen er
objectet indeholdende arrayet med oplysninger ikke nødvendigt.

Det burde derfor kunne forkortes ned til:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
function resize(url,width,height,maxwidth,maxheight){
  elm=document.getElementById('stortbillede');
  elm.src=url;

  em=width/height;
  em2=maxwidth/maxheight;
  if(em<em2){
    elm.style.height=Math.round(maxheight*em)+"px";
    elm.style.width="auto";
  }else if(em>em2){
    elm.style.width=Math.round(maxwidth*em)+"px";
    elm.style.height="auto";
  }else{
    elm.style.height=maxheight+"px";
    elm.style.width="auto";
  }
}

</script>

</head><body>
<img id="stortbillede" src="http://www.eksperten.dk/img/epro.png" height="160" width="160">
<a href="#" onclick="resize('http://www.eksperten.dk/img/elogo.png',990,1100,160,154)">test1</a>
<a href="#" onclick="resize('http://newz.dk/templates/newz-gfx1/gfx/newz-logo.gif',184,50,160,154)">test1</a>
<a href="#" onclick="resize('http://www.reuters.com/resources/images/refreshLogo.gif',187,65,160,154)">test1</a>
</body></html>
Avatar billede mclemens Nybegynder
22. juli 2007 - 18:37 #7
Hmm, jeg kom vist til at bytte rundt på height og width i ovenstående,
prøv denne script del sammen med ovenstående istedet:



<script type="text/javascript">
function resize(url,width,height,maxwidth,maxheight){
  elm=document.getElementById('stortbillede');
  elm.src=url;

  em=height/width;
  em2=maxheight/maxwidth;
  if(em<em2){
    elm.style.height=Math.round(maxwidth*em)+"px";
    elm.style.width="auto";
  }else if(em>em2){
    elm.style.width=Math.round(maxheight/em)+"px";
    elm.style.height="auto";
  }else{
    elm.style.height=maxwidth+"px";
    elm.style.width="auto";
  }
}

</script>
Avatar billede angelenglen Nybegynder
22. juli 2007 - 23:45 #8
Se det ser absolut mere interessant ud!
Jeg har dog ikke mulighed for at teste det lige nu, men jeg tester det imorgen aften.
-men jeg er meget optimistisk :-)
Avatar billede angelenglen Nybegynder
08. august 2007 - 21:15 #9
jamen det er jo perfekt!
Det virker som det skal!

Undskyld det tog så lang tid, men der kom lige noget andet i vejen for dette projekt :-(
Avatar billede mclemens Nybegynder
08. august 2007 - 21:29 #10
Velbekomme, og tak for point :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
07/0514:15 PHP Html Af Asky i Programmeringsværktøjer
07/0511:06 Rufus mange muligheder - valg ved install Windows Af Uvanga i Windows
06/0516:53 HTML Af Asky i Programmeringsværktøjer
06/0510:01 Mister internettet efter slumre, Af valby i Windows
05/0513:02 Lille smart tingest Af nu_igen i Fitness & Smartwatches
White papers
Flere white papers »