CSS max-width og max-height IE problemer

Drop de der expressions med det samme. Det er ikke anbefalelsesværdigt.

max/min-height/width er ikke det du leder efter. Den lader dig ikke croppe billedet.

Du skal finde en javascript løsning - det her er uden for CSS området. Alternativt resizing serverside.

For at få alle billeder til at passe ind i din ramme med 850x600 px størrelse - hvad er det så vi skal?

Vi skal bruge en ratio - et forhold mellem bredde og højde. Det giver os en udgangspunkts ratio på 1,416667 (width / height).

Hvis et billedes ratio er højere end det, så ved vi at billedet er "lavere" i forhold til bredden - i forhold til vores originale ratio (altså rammens ratio). Derfor skal vi resize det billede så det passer til højden, og bagefter croppe bredden.

Og vice versa med et billede med lavere ratio.

Det gør du fint i dit første javascript eksempel.

Næste skridt er at finde ud af hvor meget større billedet er på den led der er for stort. Hvis vi fx har et billede på 450x300, så er vores ratio 1,5 - højere end vores udgangspunkt, og derfor er billedet altså for bredt. Hvis vi resizer 300 til 600, (gange to) så bliver bredden 900. 900-850 = 50 i overskud.

Overskuddet divideret med 2 sættes som negativ venstre margin på billedet. Og billedet sættes i en container, som har overflow: hidden. Derved for svinder den del der er forstort og dit billede bliver centreret - så det kun er det yderste af kanterne der forsvinder...

Nu er jeg via nettet nået frem til følgende kode:

 #container img {
 
 
 width: expression(this.width > 870 ? 870: true); 
 height: expression(this.height > 615 ? 615: true);
 
 max-width: 870px; 
 max-height: 615px; 
 
 }

Men... Så kommer problemet hvis nogen fx. uploader et billeder der er næsten kvadratisk, så presses billedet på en underlig måde... Nogen der kan gennemskue hvordan det kan være?

Nu har jeg så fundet ud af at det er hvis bredden og højden kommer for tæt på hinanden, så virker det åbentbart ikke....???
Jeg har fx. et billede der er 1200x1200 det bliver presset på en mærkelig måde...
Jeg har også et billede der er 935x1200 det ser også mærkeligt ud...

Nogen der kan hjælpe...?

PFT

Ok, Gustav,

Hvad foreslår du jeg gør? Opretter en ny tråd under javascript??


Ok nu har jeg prøvet dette:

 <script>
 ffunction resizeImgOO(el) 
 { 
     function imgRatio()
     { 
         return (el.height / el.width); 
     } 
     function holderRatio()
     { 
         return (el.offsetParent.offsetHeight / el.offsetParent.offsetWidth); 
     } 
     function fitToContainer()
     { 
         if(imgRatio>holderRatio) 
         { 
             el.height = el.offsetParent.offsetHeight; 
         } 
         else 
         { 
             el.width = el.offsetParent.offsetWidth;    
         } 
     }
     
     this.imgRatio = imgRatio; 
     this.holderRatio = holderRatio; 
     this.resize = fitToContainer; 
 }
 var img = new resizeImgOO(document.getElementById('$image'));
 img.resize();
 
 </script>
 
 
 <style type="text/css">
 
 
 #container img {
 
 
 width: 850px; 
 height: 600px; 
 
 }
 
 
 </style>

hvor $image er mit billede. Det virker sådan set fint i alle browsere, den holder bare ikke proportionerne på billedet den strækker/presser bare så alle billederne passer nøjagtig ind i (width: 850px;
height: 600px ???



Jeg har også fundet den her, men den kan jeg heller ikke få til at virke....

 function resizeMe (img, maxh, maxw) {
 var ratio = maxh/maxw;
 if (img[0].height/img[0].width > ratio){
 // height is the problem
 if (img[0].height > maxh){
 img[0].width = Math.round(img[0].width*(maxh/img[0].height));
 img[0].height = maxh;
 }
 } else {
 // width is the problem
 if (img[0].width > maxh){
 img[0].height = Math.round(img[0].height*(maxw/img[0].width));
 img[0].width = maxw;
 }
 } /**/
 
 };
 
 resizeMe($(‘#image-one’), 100, 50);

Men her kan jeg ikke få det smeltet sammen med min linje som indsætter billedet:

 $image = "billeder/".$img.".jpg";
         echo "<p><img src=\"$image\" border=\"1\" ></p>";

Hej igen Gustav, jeg tror du misforstår hvad det er jeg vil... Jeg vil ikke croppe billedet. Jeg vil reseize den længste side af billedet så den passer ind i rammen og så skal den anden side af billedet automatisk blive mindre også, men billedet skal sit originale aspect ratio. Der må altså ikke croppes/beskæres noget af billedet væk.