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

Question

[ravlex]

Есть блок с резиновой шириной, в нем картинка и подпись снизу. Если делать фото резиновыми, то высота блока меняется... На скрине это видно. Первый блок это пример того, как должны быть остальные.

Comments

[Алексей]

а в фотошопе нельзя чтоле все фото в ровень сделать ? чтож все так костыли какие то любят

Answer 1

[Dvoeglazov]

.preview {
height: 100px;
width: 100px; 
}

.preview img {
width: 100%;
height: 100%;
object-fit: cover;  /*ключевое свойство, сохранит пропорции картинки и растянет ее на весь блок, лишнее обрежется, и фотошоп не нужен)*/