Как адаптировать изображения в блоке?

Question

[Thomas Laybe]

Добрый день!
Уже второй день парюсь насчет адаптация изображений в блоке(блога)
На больших экранах блок просто встает центр экрана и сами изображения никак не меняют ширину высоту, как бы я ширину и длину блока не указывал в процентах и т.п

собственно сам блок)
articles {
background-color: #121214;
height: 1000px;
width: 82.88333333333333%;
float: right;
}

Думаю, дело даже не в блоке, а в самих изображениях. Каждое изображение имеет разную ширину и высоту и выставлены в ряд, вот пример одного изображения
.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;
}

Дело в том, что изображения обрезаются, чтобы каждая картинка хорошо смотрелась с той или иной шириной и высотой

P.S И сами изображения не встают на свободное место и никак не двигаются с места...

Выручите и сохраните мои нервы. С уважением Thomas!)

Comments

[Вадим]

Чтобы кто-то выручил и сохранил Ваши нервы, потрудитесь сначала выручить и сохранить нервы того, кто Вам поможет.
Вы же вроде должны понимать что тут не ясновидящие сидят, верно?
Примеры кода? Макет? Ссылку на песочницу? Хоть что-то...

[Alex]

Потрудитесь хотя бы прочитать правила сайта. Особенно пункт 3.1

[Thomas Laybe]

Вадим,

(собственно сам блок)
articles {
background-color: #121214;
height: 1000px;
width: 82.88333333333333%;
float: right;
}

Думаю, дело даже не в блоке, а в самих изображениях. Каждое изображение имеет разную ширину и высоту и выставлены в ряд, вот пример одного изображения
.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;
}

Дело в том, что изображения обрезаются, чтобы каждая картинка хорошо смотрелась с той или иной шириной и высотой

Answer 1

[ArtJH]

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

Comments

[Thomas Laybe]

К сожалению, не помогли...
Благодарю за попытку

[ArtJH]

Thomas Laybe, загрузи код в песочницу или на хостинг, помогу

[Thomas Laybe]

ArtJH, Выше указал проблемные места с кодом, чекните, если требуется еще что-нибудь, скину

[ArtJH]

Thomas Laybe, загрузи код в песочницу

[Thomas Laybe]

ArtJH, https://codepen.io/Laybe/pen/VwjKvgJ

[ArtJH]

Thomas Laybe, качество верстки не самое лучшее.
Вставь вот это

.articles a img {
    object-fit: cover;
}

[Thomas Laybe]

ArtJH, про качество в курсе, а так, не сработало...

[ArtJH]

Thomas Laybe, так надо?
https://jsfiddle.net/ArtJH/y8dhvebr/138/

[Thomas Laybe]

ArtJH, Короче, перепишу весь код, спасибо огромное за предоставленную помощь, все же, отмечу вас решением

Answer 2

[Alex]

Ну, вот там где вы растягиваете блок, вам нужно растягивать изображение, и ставить его туда, куда вы хотите.