Ik werk met afbeeldingen, en ik stuitte op een probleem met beeldverhoudingen.
<img src="big_image.jpg" width="900" height="600" alt="" />
Zoals je kunt zien, zijn height
en width
al opgegeven. Ik heb CSS regel toegevoegd voor afbeeldingen:
img {
max-width:500px;
}
Maar voor big_image.jpg
, krijg ik width=500
en height=600
. Hoe kan ik instellen dat afbeeldingen verkleind worden, met behoud van hun beeldverhoudingen.
De background-size eigenschap is ie>=9 alleen, maar als je dat goed vindt, kun je een div met background-image
gebruiken en background-size: contain
instellen:
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
Nu kun je gewoon de grootte van je div instellen op wat je maar wilt en niet alleen zal de afbeelding zijn aspect ratio behouden, het zal ook zowel verticaal als horizontaal gecentraliseerd worden binnen de div. Vergeet alleen niet de afmetingen in te stellen op de css aangezien divs geen width/height attribuut hebben op de tag zelf.
Deze aanpak is anders dan setecs antwoord, met deze aanpak zal het afbeeldingsgebied constant zijn en door u worden gedefinieerd (waarbij lege ruimtes horizontaal of verticaal worden gelaten, afhankelijk van de div grootte en de beeldverhouding), terwijl setecs antwoord u een box zal geven die precies de grootte heeft van de geschaalde afbeelding (zonder lege ruimtes).
Bewerken: Volgens de MDN background-size documentatie kun je de background-size eigenschap in IE8 simuleren met behulp van een eigen filterdeclaratie:
Hoewel Internet Explorer 8 de background-size eigenschap niet'ondersteunt, is het mogelijk om sommige van zijn functionaliteit te emuleren met behulp van de niet-standaard -ms-filter functie:
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
Verwijder de "height" eigenschap.
<img src="big_image.jpg" width="900" alt=""/>
Door beide te specificeren verander je de aspect ratio van de afbeelding. Als je er maar één instelt, wordt de grootte aangepast, maar blijft de beeldverhouding behouden.
Optioneel, om oversizings te beperken:
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
Er is geen standaard manier om de beeldverhouding te behouden voor afbeeldingen met breedte
, hoogte
en max-breedte
samen gespecificeerd.
We zijn dus gedwongen om width
en height
te specificeren om "sprongen" in de pagina tijdens het laden van afbeeldingen te voorkomen, of om max-width
te gebruiken en geen afmetingen voor afbeeldingen op te geven.
Alleen width
opgeven (zonder height
) heeft meestal niet veel zin, maar je kunt proberen om het height
HTML-attribuut te overschrijven door een regel als IMG {height: auto; }
toe te voegen aan je stylesheet.
Zie ook de gerelateerde Firefox bug 392261.