Почему фотографии расширяются и заезжают на следующий блок?

Question

[rxvl_051]

каждый тег img сделал адаптивным при помощи данного кода:

&__item {
flex: 1 1 auto;
position: relative;
margin: 2px;
border: 2px solid #111;
padding: 100px;
}
&__item img {
position: absolute;
top: 0;
left: 0;
object-fit: cover;
height: 100%;
width: 100%;
}

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

как исключить данную проблему? за любую помощь буду очень благодарен.

Answer 1

[Александр]

Насколько я вижу, картинки не растягиваются. В 1 варианте они обрезаются, а во втором показаны полностью. Тут можно попробовать изменить свойства контейнера картинки (или самой картинки - contain вместо cover), но не видя разметки сложно точно судить об этом.

Comments

[rxvl_051]

с применением contain фотографии заехали сразу выехали из своего блока, приложил разметку к ответу

[Александр]

Да, contain тут ни при чем. Лично мне непонятно в т.ч. что может происходить, если как вы пишите, изменение появляется "немного подождав"... хз... откуда эта задержка по времени. А вы смотрели? Когда заголовок исчезает - там картинка на него заезжает (а сам заголовок под ней целый) или заголовок исчезает? (или теряет высоту)?

[rxvl_051]

Александр, спасибо за помощь, эта проблема каким-то образом сама собой решилась (я так и не понял с чем это связано было)

[Александр]

Поздравляю. Да, так бывает. Лучше конечно когда удается обратить внимание после какого изменения все нормализовалось (чтобы решить ракой вопрос в будущем). Но бывает и так, что решается и так и не понятно как.