The problem lies in the images: https://i.sstatic.net/rydNO.png
Here is an example of desktop resolution: https://i.sstatic.net/uv6KT.png
I need to use default size pictures (800x450px) on the server. This means I have to resize and crop them with CSS to fit the container div's width while keeping the height consistent for all images in a row. Additionally, when the window is resized, the images should maintain their aspect ratio.
Below is an example of HTML code:
<div class="wrap">
<div class="container col-7">
<img src="http://lorempixel.com/800/450/sports/1/" alt="">
<h2>Title1</h2>
</div>
<div class="container col-5">
<img src="http://lorempixel.com/800/450/sports/2/" alt="">
<h2>Title2</h2>
</div>
<div class="container col-5">
<img src="http://lorempixel.com/800/450/sports/3/" alt="">
<h2>Title3</h2>
</div>
<div class="container col-4">
<img src="http://lorempixel.com/800/450/sports/4/" alt="">
<h2>Title4</h2>
</div>
<div class="container col-3">
<img src="http://lorempixel.com/800/450/sports/5/" alt="">
<h2>Title5</h2>
</div>
And here is an example of CSS code:
.wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container {
display: flex;
flex-direction: column;
}
.container img {
width: 100%;
display: block;
}