Completely Fill a Div With an Image

By Forrest Smith -

I used to just use a div and set the background image to what I wanted, and then set the background-image properties to cover. This has never actually seemed like a good, semantic way of doing it though, and lazy-loading those images takes a bit more work, and you miss out on some alt tag opportunities. The better way of doing this I guess is to use the object-fit parameter. Set the width and the height of the image to max the wrapper div, and use object fit like so:

    width: 100%;
    height: 200px;
    object-fit: cover;