Css Force Image Resize and Keep Aspect Ratio

CSS force image resize and keep aspect ratio

img {  display: block;  max-width:230px;  max-height:95px;  width: auto;  height: auto;}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p><img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Force an image to fit and keep aspect ratio

You can try CSS3 object-fit, and see browser support tables.

CSS3 object-fit/object-position Method of specifying how an object (image or video) should fit inside
its box. object-fit options include "contain" (fit according to aspect
ratio), "fill" (stretches object to fill) and "cover" (overflows box
but maintains ratio), where object-position allows the object to be
repositioned like background-image does.


.container {  width: 200px; /*any size*/  height: 200px; /*any size*/}
.object-fit-cover { width: 100%; height: 100%; object-fit: cover; /*magic*/}
<div class="container">  <img class="object-fit-cover" src="https://i.stack.imgur.com/UJ3pb.jpg"></div>

How do I auto-resize an image to fit a 'div' container?

Do not apply an explicit width or height to the image tag. Instead, give it:


Also, height: auto; if you want to specify a width only.

Example: http://jsfiddle.net/xwrvxser/1/