CSS force image resize and keep aspect ratio

Question

I am working with images, and I ran across a problem with aspect ratios.

Answer 1

Fullscreen presentation:

img[data-attribute] {height: 100vh;}

Keep in mind that if the view-port height is greater than the image the image will naturally degrade relative to the difference.

Answer 2

https://jsfiddle.net/sot2qgj6/3/

Here is the answer if you want to put image with fixed percentage of width, but not fixed pixel of width.

And this will be useful when dealing with different size of screen.

The tricks are

1. Using padding-top to set the height from width.
2. Using position: absolute to put image in the padding space.
3. Using max-height and max-width to make sure the image will not over the parent element.
4. using display:block and margin: auto to center the image.

I've also comment most of the tricks inside the fiddle.

---

I also find some other ways to make this happen. There will be no real image in html, so I personly perfer the top answer when I need "img" element in html.

simple css by using background http://jsfiddle.net/4660s79h/2/

background-image with word on top http://jsfiddle.net/4660s79h/1/

the concept to use position absolute is from here http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Answer 3

I think, in finally that this is the best solution, easy and simple:

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

Answer 4

This is mental. Use the scale-down property - it explains itself.

Inline styling:

<img src='/nic-cage.png' style={{ maxWidth: '50%', objectFit: 'scale-down' }} />

This will stop flex from stretching it. In this case, the image would go to 50% of the width of its parent container and the height would scale down to match.

Keep it simple.

Answer 5

img {
  max-width: 80px; /* Also works with percentage value like 100% */
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">

<p>Let's say the author of the HTML deliberately wants
  the height to be half the value of the width,
  this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">

Answer 6

Set the CSS class of your image container tag to image-class:

<div class="image-full"></div>

and add this you your CSS stylesheet.

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}