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

Question

[XenTerSeO]

Вот пример - https://jsfiddle.net/9hhb9d7x/
Изображения меняют высоту и ширину при изменении разрешения.
Но одно изображение больше другого, что нужно исправить.

Если установить высоту родительского блока - https://jsfiddle.net/junt58e4/, то изображения перестанут растягиваться, как в первом варианте и будут менять размер только в ширину, при изменении разрешения.

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

Answer 1

[Ivanq]

https://jsfiddle.net/Ivanq/9hhb9d7x/3/

Comments

[XenTerSeO]

К сожалению, изображения должны менять высоту и ширину при изменении разрешения окна.
В Вашем варианте они не меняются вовсе.

[Ivanq]

XenTerSeO: https://jsfiddle.net/Ivanq/9hhb9d7x/5/ ?

Answer 2

[Михаил Чирский]

А почему бы не использовать max-width, max-height? Никогда не было с ним проблем
вот пример

Answer 3

[Магжан Биргебайулы]

Использовать в стиле:

.box{
	background-image: url(...);
	background-size: auto 100%;
	border: 1px solid #eee;
	float: left;
	height: 200px;
}