Maximale breedte van CSS-afbeelding ingesteld op originele afbeeldingsgrootte?

Kun jij dit? Ik laat gebruikers afbeeldingen uploaden naar een container met de breedte: 100%, maar ik wil niet dat de afbeeldingen groter zijn dan hun oorspronkelijke grootte. Hartelijk dank!


Antwoord 1, autoriteit 100%

Stel alleen niet de widthvan de afbeelding in, alleen de max-width.

img {max-width:100%; height:auto}

(height:autois niet echt nodig, aangezien autode standaard is, maar ik heb het erin gezet om mezelf eraan te herinneren dat ik de afbeelding wil hebben zijn natuurlijke proporties.)

Dit fragment heeft twee vakken, een die kleiner is dan de afbeelding en een die groter is. Zoals je kunt zien, wordt de afbeelding in het kleinere vak verkleind, terwijl het beeld in het grotere vak de normale grootte heeft.

div {border:2px outset green; margin:6px 0}
.box1 {width:100px; height:70px;}
.box2 {width:200px; height:100px;}
img {max-width:100%; height:auto}
<div class="box1">
    <img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
</div>
<div class="box2">
    <img src="https://i.stack.imgur.com/FuQYf.png" alt="" />
</div>

Snippet uitvouwen


Antwoord 2

Je kunt de maximale breedte van de afbeelding instellen in een stijltag op de afbeelding zelf.
Stel vervolgens in het stijlblad het weergavetype in op “blokkeren”, de breedte op het gewenste percentage van de container en de hoogte op automatisch. Voeg daar vervolgens marge: 0px auto aan toe en het zou perfect moeten centreren en zal nooit groter zijn dan het oorspronkelijke formaat.

Als dit door gebruikers geüploade afbeeldingen zijn en u gebruikt bijvoorbeeld PHP, zoek dan de breedte van de afbeelding met getImageSize() en voeg de stijltag programmatisch toe aan de afbeelding.

Other episodes