'Why is my 1st code images behaving differently compared to my 2nd code background-images despite using the same width unit @ 30%?

1st Code:

https://jsfiddle.net/dmbgc4qz/1/

div {
    display: inline-block;
    height: 60vh;
    width: 30%;
    margin: 2.5rem 1.5rem 0;
    background: url("https://images.unsplash.com/photo-1648070201547-9d6ef53d3a51?ixlib=rb- 
    1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80");
    text-align: center;
    background-size: cover;
    background-position: center;
}
  • The images from this code which are background-images gets progressively thinner when I change the size of the screen and it eventually turn to 1 image as the size of the screen gets smaller.

2nd Code:

https://jsfiddle.net/dmbgc4qz/2/

img {
    width: 30%;
}
  • The images from this code which are html do not get progressively thinner and remain as triplet per line even when the size of the screen is altered.

Can anybody please explain this phenomenon to me? Why is the image behaving so differently despite same width unit provided? Is it because of the display property?

htmlcss


Solution 1:[1]

This is because you didn't specify the margin for the img so if you add this margin: 2.5rem 1.5rem 0; it will act similarly to the first one

img {
    width: 30%;
    margin: 2.5rem 1.5rem 0;
    height:60vh;
    object-fit:cover;
    object-position:center;
}
<body>
    
    <img src="https://images.unsplash.com/photo-1648070201547-9d6ef53d3a51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80" alt="">
    <img src="https://images.unsplash.com/photo-1648070201547-9d6ef53d3a51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80" alt="">
    <img src="https://images.unsplash.com/photo-1648070201547-9d6ef53d3a51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80" alt="">
    
    <img src="https://images.unsplash.com/photo-1648070201547-9d6ef53d3a51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80" alt="">
    <img src="https://images.unsplash.com/photo-1648070201547-9d6ef53d3a51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80" alt="">
    <img src="https://images.unsplash.com/photo-1648070201547-9d6ef53d3a51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80" alt="">

    <img src="https://images.unsplash.com/photo-1648070201547-9d6ef53d3a51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80" alt="">
    <img src="https://images.unsplash.com/photo-1648070201547-9d6ef53d3a51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80" alt="">
    <img src="https://images.unsplash.com/photo-1648070201547-9d6ef53d3a51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80" alt="">

</body>

</html>

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

Related Questions