Responsive image - why image in this scenerio is not responsive? - html

Question

thanks for helping!
I set 2 images of -
800X1000
Image 1 :
Set in a container that set to :
width: 100%.
The image I also set to -
width: 100%
Image 2 :
Set without a container, without any special order.
I set a border to my container -
And when resizing the screen, to about the 800px mark -
The container started to shrink and didn't take the 100% width I set.
(Therefore , the image is also shrunk).
Once I removed image number 2, it as expected - take the full 100% width of the screen.
Why is that?
Why once I had 2 images inside, the second Image basically cause the to shrink?
This is my code ( nothing special, 2 CSS lines)
.alon {
width: 100%;
border: 5px solid green;
}
.alon img {
width: 100%;
}
<div class="alon">
<img src="images/donald.jpg" alt="">
</div>
<img src="images/donald.jpg">
HTML above.

Answer 1

Your second image has no styling, you basically just dropped an image in the body container and never specified a width for it.
With the code you provided, the second image will keep its default width, while the image in the .alon div will take the width of its parent container. In this case, the image in the .alon div is taking 100% width of the browser, and the image within is taking 100% width of the .alon div.
I've included an example below that applies 100% width to the second image as well.
body img {
width: 100%;
}
* {
box-sizing: border-box;
}
.alon {
width: 100%;
border: 5px solid green;
padding: 0px;
}
.alon img {
width: 100%;
padding: 0px;
}
body img {
width: 100%;
}
<div class="alon">
<img src="https://cdn.pixabay.com/photo/2020/10/28/11/08/castle-5693094__340.jpg" alt="">
</div>
<img src="https://cdn.pixabay.com/photo/2020/10/28/11/08/castle-5693094__340.jpg">
After running the code you will notice that the second image takes 100% width of the browser like your first image.
If you delete the following CSS:
body img {
width: 100%;
}
The second image will go back to its default size.
Additionally, to further answer your question, since your first image is enclosed in a div that has a 5px green border, the default box-sizing on a browser will not calculate your border as part of the declared width of 100%, which in turn, will offset your image container by 5px.
To make the browser calculate the 5px border as part of the container width of 100% you can apply a universal box-sizing: border-box to your document.
I've included this in the snippet above for reference.