Object-fit not affecting images

by

For object-fit to work, the image itself needs a width and height. In the OP’s CSS, the images do not have width and/or height set, thus object-fit cannot work.

The clue: width and height need NOT be the dimensions of the image itself! Think of it as if it were a div: If you want a div to fill its container, you will set 

width:100%; height:100%;

…and the browser will know that this div should completely fill its container’s space.

In case of an img, the browser performs two steps:

  1. The browser creates a bounding box: By default, the box dimensions will be the exact dimensions of the image itself. But we’re free to tell the browser to size the image to 100% of its container’s width and 100% of its container’s height. Then it will create a box that completely fills the container’s space.
  2. The browser fits the image pixels into this box: By default, the image will be squeezed/stretched so the image width matches the box width, and the image height matches the box height. But using object-fit, you can select how to match image and box dimensions. For example, using object-fit:cover commands to enlarge/downsize the image to completely fill the box while maintaining its aspect ratio.

Regarding the OP, I would simply set:

main > section.posts > article > img {
  width: 100%; /* image box size as % of container, see step 1 */
  height: 100%; /* image box size as % of container, see step 1 */
  object-fit: cover; /* matching of image pixels to image box, see step 2 */
}

One final caveat: When using % values for sizing, the container must have a defined width and height for object-fit to work. OP would need to define height in main > section.posts > article.

More Related Contents:

  1. How to Create Border In Css Iike
  2. change the menu font size
  3. Table fixed header and scrollable body
  4. How to vertically align text inside a flexbox?
  5. display: inline-block extra margin [duplicate]
  6. CSS grid square layout [duplicate]
  7. Masonry-style Layout ONLY with CSS
  8. CSS Single-column layout centered fixed-width 100% height w header and footer
  9. Position icons into circle
  10. How can I have two fixed width columns with one flexible column in the center?
  11. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  12. Expanding a parent to the height of its children
  13. Can you link to a CSS file from an email?
  14. How to style dt and dd so they are on the same line?
  15. How to display vertical text in table headers with auto height / without text overflow?
  16. Add target=”_blank” in CSS
  17. Why does vw include the scrollbar as part of the viewport?
  18. Center image element in parent div
  19. Why is the span’s line-height useless?
  20. CSS – How to have children in different parents the same height?
  21. How to replace color of PNG image using CSS? [duplicate]
  22. What is haslayout?
  23. Fallback background-image if default doesn’t exist
  24. Is there a reason to use a instead of a:link or a:visited in my stylesheet?
  25. Make a parent div webkit-filter not affect children
  26. Square DIV where height is equal to viewport
  27. Yet Another Divs vs Tables issue: Forms
  28. Pin a flex item to the bottom of the container
  29. Can a div have multiple classes (Twitter Bootstrap) [duplicate]
  30. Create wavy borders in CSS for top and bottom borders

Leave a Comment