Beperk de hoogte van een responsieve afbeelding met css

Mijn einddoel is om een ​​vloeiende <img>te hebben die niet verder reikt dan een expliciet ingestelde hoogte van een bovenliggend/grootouderelement met alleen css.

Momenteel doe ik dit met een normale (max-width:100; height:auto;) vloeiende afbeelding en javascript door de hoogte/breedte-attributen van de img-tag te lezen en het aspect te berekenen ratio, het berekenen van de juiste breedte van de afbeelding bij de gewenste hoogtebeperking en het toepassen van die breedte als een max-widthop het containerelement van de afbeelding. Vrij eenvoudig, maar ik zou het graag zonder javascript kunnen doen.

height:100%; width:auto;werkt niet hetzelfde als zijn transversale, en ik heb een aantal pogingen gedaan met de oude opgevulde doos van Unc Dave en de absolute positionering van die functie, maar ik moet de hoogte-breedteverhouding van de afbeelding vooraf kennen en kan daarom niet worden toegepast op afbeeldingen met verschillende verhoudingen. Dus de laatste vereiste is dat de css proportie-agnostisch moet zijn.

Ik weet het, ik weet het, het antwoord op deze vraag is waarschijnlijk naast de eenhoornboerderij zitten, maar ik dacht ik gooi het er toch maar uit.

Antwoord 1, autoriteit 100%

De truc is om zowel max-height: 100%;als max-width: 100%;toe te voegen aan .container img. Voorbeeld CSS:

.container {
  width: 300px;
  border: dashed blue 1px;
}
.container img {
  max-height: 100%;
  max-width: 100%;
}

Op deze manier kunt u de opgegeven breedte van .containerop elke gewenste manier variëren (200px of 10% bijvoorbeeld), en de afbeelding zal niet groter zijn dan zijn natuurlijke afmetingen. (U kunt pixels specificeren in plaats van 100% als u niet wilt vertrouwen op de natuurlijke grootte van de afbeelding.)

Hier is de hele viool: http://jsfiddle.net/KatieK/Su28P/1/

Antwoord 2, autoriteit 3%

Ik heb de onderstaande 3 stijlen ingesteld op mijn img-tag

max-height: 500px;
height: 70%;
width: auto;

Wat het doet voor desktopscherm img groeit niet verder dan 500pxmaar voor kleine mobiele schermen krimpt het tot 70% van de buitenste container. Werkt perfect.

Het werkt ook widtheigenschap.

Antwoord 3

U kunt inline styling gebruiken om de hoogte te beperken:

<img src="" class="img-responsive" alt="" style="max-height: 400px;">