How can I resize all photos to the same size? - html

Question

I have this site:link
but i have the following problem:problem
What I want to do is:
1. the two images must have a width of 33.3333% , but the middle image must
remain as it is
another of my problems is when I resize the browser,the middle image is much higher.
CSS
.inline-block{
display: inline-block;
vertical-align: top;
}
.left-img,.right-img{
width: 33.3333%;
}
.left-img{
background: url("/wp-content/themes/wp_bagel/assets/img/img-01.png");
background-size: cover;
}
.ctr-img{
background: url("/wp-content/themes/wp_bagel/assets/img/img-02.png");
background-size: cover;
}
.right-img{
background: url("/wp-content/themes/wp_bagel/assets/img/img-03.png");
background-size: cover;
}
HTML
<div class="left-img inline-block">
<img src="/wp-content/themes/wp_bagel/assets/img/img-01.png" alt="Mountain View" style="visibility: hidden;">
</div>
<div class="ctr-img inline-block">
<img src="/wp-content/themes/wp_bagel/assets/img/img-02.png" alt="Mountain View" style="visibility: hidden;">
</div>
<div class="right-img inline-block">
<img src="/wp-content/themes/wp_bagel/assets/img/img-03.png" alt="Mountain View" style="visibility: hidden;">
</div>

Answer 1

This will not be possible with just HTML / CSS. You will have to use Javascript. For your layout, I would suggest taking a look at Masonry.

Answer 2

What I understand from your question is that you're trying to make all the three images of the same size, and this isn't happening when you're resizing the browser.
Well that, I think, is because you're specifying the width of left and the right images as 33% of screen and you're not setting the width of middle image. Try adding the ctr-image class also to that CSS block. i.e.,
.left-img,.ctr-img,.right-img{
width: 33.3333%;
}
instead of just
.left-img,.right-img{
width: 33.3333%;
}

Answer 3

click here to website
https://www.sitepoint.com/web-foundations/resize-images-css/
you get an idea
use like that:
#media screen and (orientation: portrait) {
img.ri { max-width: 90%; }
}
#media screen and (orientation: landscape) {
img.ri { max-height: 90%; }
}

Answer 4

I suggest you to use framework with grid system (Bootstrap par exemple). With three images, you need to set .col-md-4, .col-sm-4, .col-xs-4 to each image and then you have a perfect display.
To make all three images have the same height, if u want, u can fix the height. If not, the following solution works well:
.image-container {
position: relative;
padding: 0 0 56.25% 0;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Change 56.25% to the value that is best for you and then you will have what you want.
This is an exemple with your images: Codepen

Answer 5

You have a { max-width: 100%; } in your main.css file, remove it, and add {width: 100%}...
img {
border: 0;
max-width: 100%; /* Remove this line */
width: 100%; /* Add this line */
height: auto;
}
Then, You must make all 3 images in same height! Resize your images to same height... for example if your minimum height is 177px (first image), the second image must resize to (184x177) and the last image must be (235x177).
Finally, add { width: 33%; } for the center image-div
.ctr-img {
width: 33%;
}