Is there a way to resize an image within its container without sacrificing its aspect ratio? It needs to work in IE9 and I can't use background images or JavaScript.
In my example, both images are smaller than the container but some may be larger and need to be scaled down.
To scale down images larger than their container, you can use the following CSS:
img {
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
}
But how can we trick the browser into thinking the image is larger than it actually is, similar to using the sizes attribute with the picture element?
https://i.sstatic.net/KCaZa.jpg
http://codepen.io/anon/pen/KdaboK
<div class="one">
<img src="http://www.nwhgeopark.com/wp-content/uploads/landscape.jpg" />
</div>
<div class="one">
<img src="http://ecx.images-amazon.com/images/I/519fW0fHKbL._SY300_.jpg" />
</div>
.one {
border: 1px solid red;
float: left;
margin: 20px;
height: 500px;
width: 500px;
}
img {
}