0

I'm looking for a solution to resize my <img> element with CSS:

  1. Must keep aspect ratio for landscape and square and portrait images
  2. Must work in upscale (shrinking) and downscale (stretching) scenarios
  3. In addition to Chrome/FF/Safari/Opera must also work in IE 10/Edge (IE 8+ support is nice to have)

None of the solutions (like this or this) I found here works as required. The best one that uses object-fit: contain does not work in IE. Is it doable without javascript?

Community
  • 1
  • 1
UserControl
  • 14,766
  • 20
  • 100
  • 187

1 Answers1

0

You just need to set a max-width and max-height for your img element. Providing that your images are larger than the container, this trick should resize your images in the correct ratio.

I have an example here:

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

http://codepen.io/Himechi90/pen/MaoEWg

Good luck!

Himechi90
  • 358
  • 2
  • 12
  • This does not work when an image has lower resolution, i.e. needs to be stretched to fill any space available. – UserControl Oct 09 '15 at 05:59
  • Very true. That's why I said in my comment "Providing that your images are larger than the container.." But thanks for pointing it out! – Himechi90 Oct 09 '15 at 06:18