Wie wird das Bild im Container mit konstantem Seitenverhältnis automatisch mit nur CSS formatiert?

<div id="box"> 
    <div id="wrap"> 
     <img> 
    </div> 
</div>

und CSS:

#box { 
    width: 500px; 
    min-height: 400px; 
    max-height: 600px; 
}

Wie img mit konstantem Seitenverhältnis Autofit nur mit CSS? Hier ist ein Beispiel für das Bild richtig passend:

http://stackoverflow.com/questions/12991351/css-force-image-resize-and- keep-aspect-ratio – linktoahref

Ich glaube nicht, dass das mit reinem CSS gemacht werden kann, wenn der Container auch einer Min- und Max-Höhe gehorchen soll. – CBroe

erklären Sie Ihre Frage, können Sie Bilder reagieren und sie wird Größe Demo - https://jsfiddle.net/yc32n7ud/ – grinmax

-2

Sie könnten versuchen, dies in Ihrem css

img { 
    width:auto; 
    height:auto; 
    }

Oder guten alten HTML

<img src="http://imageurl.jpg" style="width: auto; height: auto;">

2017-01-31 14:13:56 3215461241891

Funktioniert das? Löst dies das Problem des OP? – hungerstar

#box { 
    width:100%; 
    height:100%; 

} 
#box img { 
width :100%; 
}

versuchen, diese zu beheben das Bildverhältnis.

2017-01-31 15:04:10

ist es Arbeit @Kesantielu Dasefern? –

Css für den übergeordneten Container - min-height: 400px; max-height: 600px;

Und dann für das Bild selbst:

#box { 
    width: 100%; 
    height: auto; 

}

2017-01-31 15:26:52 andrey

Antwort