html – Analogue background-size: cover for img

Question:

Is it possible to do the same positioning of the image in the img tag as it does with background-size: cover ?

I saw solutions using object-fit , also looked at other versions, but none of them work. Can it be done without object-fit ?

The object-fit property works: most likely you misapplied it or looked at it in IE. Below is an example of the correct use of the property:

#bg {
    height: 100vh;
    width: 100%;
    position: relative;
}

#bg img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

<html>
<body>
    <div id="bg">
        <img src="https://1000.tech/img/bg0.jpg">
    </div>
</body>
</html>

The bottom line is to make the img stretch to the full height and width of the parent block, then the object-fit: cover property will work.

Post Views: 0