How to adapt images in a block?

Question

css

Good afternoon!
For the second day I have been worrying about adapting images in a block (blog)
. On large screens, the block simply rises to the center of the screen and the images themselves do not change the width and height in any way, no matter how I specify the width and length of the block as a percentage, etc.

the block itself)
articles {
background-color: #121214;
height: 1000px;
width: 82.88333333333333%;
float:right;
}

I think it's not even in the block, but in the images themselves. Each image has a different width and height and is lined up, here is an example of a single image
.box2 {
width: 811px;
height: 314px;
position: absolute;
overflow: hidden;
margin: -580px 764px;
}
.box2 img {
position: absolute;
top: 50%;
left: 50%
transform: translate(-50%,-50%);
width: 811px;
height: 314px;
object fit: cover;
}

The fact is that the images are cropped so that each picture looks good with one or another width and height

PS And the images themselves do not stand in the free space and do not move in any way ...

Help me out and save my nerves. Sincerely, Thomas!

Answer 1

max-width: 100%
background-size: cover;
object-fit: coder;

Answer 2

Well, that's where you stretch the block, you need to stretch the image, and put it where you want.