I have this simple script where i have 2 responsive images. If you minimize the window you will that the images will accordingly.
But i put 2 images in the same div like this:
<div class="wrapper">
<div class="block">
<img
src=
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
></img>
<img
src=
"https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"
></img>
</div>
</div>
i wont take the same effect, WHY?
Because you still had a width of 100% per image. Setting the width to 50% makes them scale again. Also set the height to auto to remain proportions.
See example below:
.wrapper {
box-sizing: border-box;
display: flex;
justify-content: center;
border: solid red;
}
.block {
display: flex;
width: 100%;
border: solid blue;
}
.block img {
width: 50%;
max-width: 400px;
height: auto;
}
<div class="wrapper">
<div class="block">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
</div>
</div>