Как сделать так чтобы картинки были одинаковой высоты?

Question

[andrey69rus]

Здравствуйте, подскажите как сделать так чтобы картинки были одной высоты (обрезались либо чуть искажались, неважно)
С низу они все разные, надо выравнять

css

html

Answer 1

[Николай]

Либо сделать overflow:hidden на контейнер, либо вставить через background-image с параметром background-size: cover

Comments

[andrey69rus]

а можете вот тут глянуть css www.kindly.cf и скачать что на что исправить, чегото не очень получается

[andrey69rus]

*сказать

[Николай]

Вам наверное нужно задать высоту у блока самому в таком случае. Т.к. сейчас ваш блок растягивается по высоте картинки. Если добавить какое-то значение высоты - то всё будет ок.

[andrey69rus]

Николай: дизайн резина и на мобилки и на пк... если задам то блоки не будут тянуться

[Николай]

Задать значения в %? Вообще тут все зависит от того, как это должно выглядеть на мобильных устройствах

[andrey69rus]

Николай: там просто блоки меньше становятся

[Николай]

Ну можно же сделать через vh, vw если необходимо фиксированное количество блоков на экране. Для ширины вы ведь используете обычные процентные размеры. Почему с высотой вы не хотите так же поступить?

[andrey69rus]

Николай: хм если
делаю так то всё что до этого было на блоке, улетает вверх, но зато размер нужный :D я уже хз чего делать

[Николай]

Из вашего описания трудно понять, что не так )))

[andrey69rus]

Николай: задаю блоку определеннцй размер в пикселях, потом " вставить через background-image с параметром background-size: cover" в итоге то что на блоке на это ранее было улетает вверх над блоком

Answer 2

[tef]

Смотря какой разброс по размерам. Если сильно большой то имеет смысл переконвертировать их на сервере.

А так, картинку вставляете фоном и задаёте позиционирование по центру. Примерно так.

img {
bacground-image: url(картинка.png);
background-position: 50%;
}

Есть ещё bacground-size: cover. Он растягивает фоновую картинку по ширине и высоте блока.

Answer 3

[Сергей Горячев]

<div>
<img>
</div>

.div {
width: 200px;
height: 300px;
}
.div img {
width: 100%;
height: 100%;
}

А нижний блок с отрицательным маргином.

Answer 4

[DEFUNK]

.shortstory {
   height: вставь нужную высоту родителя в пикселях;
}

.shortstory img {
   height:100%;
}

Ну и в хтмл подправь, класс добавь перед ссылкой

<div class="shortstory">
    <a href="{full-link}">