'height and width problem of images with percentage

when i was trying to set the image size i set width and height to 100%

so when i set the width and height of the image to 100% it is not getting the size 100% percent of the its parent element if the actual size of the image is smaller than the container when i was setting the max-width of the container as 100vh the image height is overflowing the container because this time the actual height of the image is more than the container but in the case of the width it is not overflowing

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
div{
    width:100%;
    max-height:100vh;
}

img{
    width: 100%;
    height:100%; 
}
<html>
    <body>
        <div><img src="http://via.placeholder.com/500" alt=""></div>
    </body>
</html>
htmlcss


Solution 1:[1]

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
div{
    width: 100%;
    height: 100vh;
}

img{
    width: 100%;
    max-width: 100%;
    max-height:100%; 
    object-fit: cover;
}
<div><img src="https://wallpapercave.com/wp/wp9637255.jpg" alt=""></div>

This one will help..

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 VIKESIR

Related Questions