CSS forceert het formaat van afbeeldingen en houdt de beeldverhouding

Question

Meer

Bron Niet AMP-versie Bewerken

CSS forceert het formaat van afbeeldingen en houdt de beeldverhouding

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.

Cody Guldner

Bewerkte vraag 4de1 juni 2013 в 5:23

Programmering

image css aspect-ratio

20ste5 oktober 2012 в 6:20

25 views

Hoffmann · Answer 1 · 2013-05-30T13:47:50+00:00

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')";

el Dude · Answer 2 · 2012-10-20T18:30:53+00:00

el Dude

Bron Niet AMP-versie Bewerken

Verwijder de "height" eigenschap.

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:

el Dude

Bewerkt antwoord 10de2 juli 2013 в 2:35

17

0

Commentaren (4)

Marat Tanalin · Answer 3 · 2012-10-20T18:37:36+00:00

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.