How to set height attribute for automatic image cutting?

Question

HTML

Hello
There is such a tile: large screen - i.imgur.com/JLdMfTX.jpg , while reducing the width of the screen. images are proportionally reduced - i.imgur.com/IEmlUBo.jpg

<div class="first-post">
           <img src="http://lorempixel.com/700/700/" alt="">
           </div>
           <div class="second-post">
           <img src="http://lorempixel.com/300/300/" alt="">
           <div class="heading4">Заголовок</div> 
         </div>
           <div class="fif-post">
           <img src="http://lorempixel.com/700/700/" alt="">
           </div>
           <div class="fio-post">
           <img src="http://lorempixel.com/300/300/" alt="">
           <div class="heading4">Заголовок</div> 
         </div>

.first-post img, .second-post img, .fif-post img, .fio-post img {
border-radius: 10px; width: 100%;
}

.first-post, .second-post, .fif-post, .fio-post {
padding: 5px;
}

.first-post {
width: 60%;
float: left;
}
.second-post{
width: 40%;
float: right;
}
.fif-post {
width: 60%;
float: right;
}
.fio-post{
width: 40%;
float: right;
}

If I insert images without a 1:1 aspect ratio, for example 16:9, then the image will fit in width and the "square" will not work - i.imgur.com/J10yXqJ.jpg . It is possible to somehow set the height parameter to get a similar effect, or to fix the image in the center, cutting off the edges with overflow:hidden; Or perhaps you have another solution to this issue. It is the simple that is of interest, that is, without resorting to heavy java scripts or php handlers. If, however, the latter pops up in your head, then I ask you to voice it.
Later, I decided this for myself:

.first-post img, .second-post img, .fif-post img, .fio-post img {
border-radius: 10px;
display: block;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 -25%;
}

.first-post, .second-post, .fif-post, .fio-post {
display: block;
position: relative;
overflow: hidden;
border-radius: 10px;
border: #fff 5px solid;
}

.first-post {
width: 60%;
padding: 60% 0 0 0;
float: left;
}
.second-post{
width: 40%;
padding: 35% 0 0 0;
float: right;
}
.fif-post {
width: 60%;
padding: 60% 0 0 0;
float: right;
}
.fio-post{
width: 40%;
padding: 35% 0 0 0;
float: right;
}

But now what about the content that should be under the small tiles?

Answer 1

Use backgrounds instead of images:

<div class="first-post" style="background-image: url(http://lorempixel.com/700/700/)"></div>
........

.first-post, .second-post, .fif-post, .fio-post {
  border-radius: 10px; margin: 5px;
  background: transparent center/cover
}
.first-post {
  width: calc(60% - 10px);
  height: calc(60% - 10px);
  float: left;
}
.... и так далее

Only the container should not have an explicit height and should not have position: absolute or fixed, otherwise the blocks will not turn out to be square.

Answer 2

With the help of mansory, it seems like it’s possible, again, I think the solution is cumbersome for 4 tiles. Are there any other options?