Как сделать 4 адаптивных картинки разных размеров в 2 ряда?

Question

[LittleFatNinja]

перепробовал уже все что мог

хочу достигнуть такого результата:


как сделать так, при разных размерах картинок?
https://jsfiddle.net/25L9hawt/

Comments

[dpismenny]

https://jsfiddle.net/25L9hawt/2/

[LittleFatNinja]

dpismenny: классный вариант, только пишщите в ответы, что я мог отметить

Answer 1

[Михаил Горячкин]

Грубый вариант решения вашей проблемы, ну если использовать чисто css, будет примерно такой:
HTML:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS:

ul {
    width: 70%;
    font-size: 0;
    list-style: none;
}
ul li {
    display: inline-block;
    width: 50%;
    padding: 10% 0;
    overflow: hidden;
    background-size: cover;
    background-position: 50% 50%;
}
ul li:nth-child(1) {
    background-image: url(http://untifler.narod.ru/photos/gaf8-1s.jpg);
}
ul li:nth-child(2) {
    background-image: url(http://www.gjkt.cz/files/images/budova.jpg);
}
ul li:nth-child(3) {
    background-image: url(http://imageproxy.jxs.cz/~nd04/jxs/cz~/856/512/fbafffc141_70326674_o2.jpg);
}
ul li:nth-child(4) {
    background-image: url(http://untifler.narod.ru/photos/gaf8-1s.jpg);
}
img {
    width: 100%;
}

Может вас такой вариант устроит, а иначе js вам в помощь.

Comments

[Михаил Горячкин]

Ну именно если с image делать, то вам в комментарии dpismenny пример привел, такое решение тоже может сгодиться, но оно не сработает если у вас картинка будет вертикальная. Но по хорошему лучше использовать для такого js. Посмотрите плагинов, которые делают, то что вам нужно довольно много.

[LittleFatNinja]

Михаил Горячкин: спасибо!

[Дмитрий Филандор]

Михаил Горячкин: а дайте пж ссыль на плагин