Contain an image within a div?

by

object-fit, behaves like background-size, solving the issue of scaling images up and down to fit.

The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

snapshot of an image rendered with all the object-fit options

.cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

Browser Support

There’s no IE support, and support in Edge begins at v16, only for img element: https://caniuse.com/#search=object-fit

The bfred-it/object-fit-images polyfill works very well for me in IE11, tested on Browserstack: demo.

Alternative without polyfill using an image in SVG

For Edge pre v16, and ie9, ie10, ie11:

You can crop and scale any image using CSS object-fit and object-position. However, these properties are only supported in the latest version of MS Edge as well as all other modern browsers.

If you need to crop and scale an image in Internet Explorer and provide support back to IE9, you can do that by wrapping the image in an <svg>, and using the viewBox and preserveAspectRatio attributes to do what object-fit and object-position do.

http://www.sarasoueidan.com/blog/svg-object-fit/#summary-recap

(The author explains the technique thoroughly, and duplicating the detail here would be impractical.)

More Related Contents:

  1. CSS Image Effects
  2. Center multiple images horizontally in CSS
  3. Browser can’t access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
  4. SVG data image not working as a background-image in a pseudo element
  5. CSS force image resize and keep aspect ratio
  6. CSS Image size, how to fill, but not stretch?
  7. CSS transition effect makes image blurry / moves image 1px, in Chrome?
  8. How to vertically align an image inside a div
  9. Is there any way to hover over one element and affect a different element? [duplicate]
  10. Preloading CSS Images
  11. How can I resize an image dynamically with CSS as the browser width/height changes?
  12. Drop shadow for PNG image in CSS
  13. Bootstrap icons are loaded locally but not when online
  14. image moves on hover – chrome opacity issue
  15. html, css – weird invisible margin below pictures
  16. Replacing H1 text with a logo image: best method for SEO and accessibility?
  17. How to put an image in div with CSS?
  18. Responsive Images with CSS
  19. Cross browser way to rotate image using CSS?
  20. Replace input type=file by an image
  21. Symfony2 – Assetic – load images in CSS
  22. Removing the image border in Chrome/IE9
  23. Define an ‘s src attribute in CSS [duplicate]
  24. vertical-align image in div [duplicate]
  25. How to vertically align an image inside a div
  26. How to use images in css with Webpack
  27. input type=”image” shows unwanted border in Chrome and broken link in IE7
  28. Print styles: How to ensure image doesn’t span a page break
  29. Inner border over images with CSS?
  30. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?

Leave a Comment