Is there an equivalent to background-size: cover and contain for image elements?

by

Solution #1 – The object-fit property (Lacks IE support)

Just set object-fit: cover; on the img .

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}
<img src="http://lorempixel.com/1500/1000" />

See MDN – regarding object-fit: cover:

The replaced content is sized to maintain its aspect ratio while
filling the element’s entire content box. If the object’s aspect ratio
does not match the aspect ratio of its box, then the object will be
clipped to fit.

And for object-fit: contain:

The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box. The entire object is made to fill the box, while preserving its aspect ratio, so the object will be “letterboxed” if its aspect ratio does not match the aspect ratio of the box.

Also, see this Codepen demo which compares object-fit: cover applied to an image with background-size: cover applied to a background image

Solution #2 – Replace the img with a background image with css

body {
  margin: 0;
}
img {
  position: fixed;
  width: 0;
  height: 0;
  padding: 50vh 50vw;
  background: url(http://lorempixel.com/1500/1000/city/Dummy-Text) no-repeat;
  background-size: cover;
}
<img src="http://placehold.it/1500x1000" />

More Related Contents:

  1. Black image fade over image [duplicate]
  2. Image inside div has extra space below the image
  3. When to use IMG vs. CSS background-image?
  4. Fill SVG path element with a background-image
  5. What is the effect of encoding an image in base64?
  6. CSS Display an Image Resized and Cropped
  7. Is element block level or inline level?
  8. Removing whitespace between HTML elements when using line breaks
  9. Should I specify height and width attributes for my IMGs in HTML?
  10. Embed image in a element
  11. Make an image responsive – the simplest way [duplicate]
  12. How can I make all images of different height and width the same via CSS?
  13. CSS image resize issue
  14. Floating an image to the bottom right with text wrapping around
  15. Scale image to fit a bounding box
  16. CSS image resize percentage of itself?
  17. img tag displays wrong orientation
  18. How does one use the onerror attribute of an img element
  19. Image scaling causes poor quality in firefox/internet explorer but not chrome
  20. CSS: How can I set image size relative to parent height?
  21. How to make images stay within the rows of a css grid container?
  22. How to strike through obliquely with css
  23. How can I resize an image to a percentage of itself with CSS?
  24. CSS align images and text on same line
  25. How to auto-resize an image while maintaining aspect ratio
  26. How to place Text and an Image next to each other in HTML?
  27. Make Bootstrap’s Carousel both center AND responsive?
  28. Use the HTML tag as a background image instead of the CSS background-image property?
  29. How to center image in a div horizontally and vertically
  30. Is it possible to set a src attribute of an img tag in CSS?

Leave a Comment