Плывет верстка из за размеров изображений, что делать?

Question

[Asher-rd]

По задумке все изображения должны были иметь одинаковый размер, но не всегда они имеются, да и не всегда тот кто заполняет догоняет, что нужно делать и какие изображения вставлять, тут уж мой промах. Дело в том, что верстка адаптивная ширина блоков в 100%, изображение там в ширину 100%, а высота авто. И задать фиксированные размеры высоты мы не можем, тогда верстка будет не красивой так как блок с изображением будет полупустой. В результате если загружается изображения меньше чем 640 пикселей в ширину и/или 512 пикселей в высоту, вертска плывет таким образом. Нужны идеи.

Answer 1

[Dmitry Bay]

Может высоту в 100%, а ширину скрывать при переполнении высоты? Я все таки бы отталкивался то этого варианта.

Answer 2

[Александр Анкудинов]

.block{
overflow-x:hidden;
width:300px;
float:left;
}
.block:after{
clear:both;
display:table;
content:'';
}
.block img{
 height:100%;
}

<div class="block">
<img scr="/fsfsd/img.png" />
</div>

Comments

[Глеб Мазур]

спасибо, тебе, дружище

Answer 3

[Глюкъ Виртуален]

Пропишите для стиль object-fit: contain и задайте ему рамку для приличия.

Answer 4

[krock00000]

Попробуйте изображения подавать фоном.