menu

arrow_back How do I adapt the images in the block?

by
1 vote
Good afternoon!
For the second day I'm struggling with the adaptation of images in the block (blog)
On large screens block just stands in the center of the screen and the images themselves do not change the width and height, no matter how I did not specify the width and length of the block in the percentage, etc.

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

I think it's not even the block, but the images themselves. Each image has a different width and height and is arranged in a row, here is an example of one 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 point is that images are cropped so that each picture looks good with a particular width and height

P.S And the images themselves do not stand on a free place and do not move from the place...

Help me out and save my nerves. Regards Thomas!)

3 Comments

In order for someone to help you out and save your nerves, you should first try to help out and save the nerves of the person who will help you.
You must realize that there are no clairvoyants sitting here, right?
Examples of code? Layout? A link to the sandbox? Anything at all...
Try to at least read the rules of the site. Especially paragraph 3.1
Vadim ,

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

I think it's not even the block, but the images themselves. Each image has a different width and height and is arranged in a row, here is an example of one 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 point is that images are cropped so that each picture looks good with a particular width and height

2 Answers

by
 
Best answer
0 votes
max-width: 100%
background-size: cover;
object-fit: coder;
by
1 vote
Well, that's where you stretch the block, you have to stretch the image, and put it where you want it.