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

Question

[Михаил Гришин]

Добрый день, не получается выровнять по высоте картинке, смотрите скриншот: joxi.ru/52anZO7UNjN9A0
верстаю при помощи bootstrap, слева есть меню занимает 2 колонки. Дальше идут эти картинки и занимают ширину в 5 столбцов, но почему-то левая картинка, когда указал ей ширину = 100%, вылезла.. Если делаю ширину меньше, появляется расстояние, чего не должно быть.
Подскажите как это убрать?

<div class="col-lg-5 main-content">
		<div class="content-vertical">
			<img src="img/new-look.jpg" alt="Новые луки">
		</div>
	</div>
	<div class="col-lg-5 main-content">
		<div class="content-horizonal">
			<img src="img/for-women.jpg" alt="Для женщин">
		</div>
		<div class="content-horizonal">
			<img src="img/for-men.jpg" alt="Для мужчин">
		</div>
	</div>

.main-content {
	padding: 0;
	margin: 0;
}
.content-vertical img
 {
	width: 100%;
}
.content-horizonal img {
	width: 100%;
}
.content-horizonal {
	max-width: 854px;
	width: 100%;
}

Comments

[Ivan Stroykin]

Скиньте код, чтобы помогать опираясь уже на написанный вариант

[Михаил Гришин]

Иван Стройкин: Добавил

[Ivan Stroykin]

Михаил Гришин: уже сплю, поэтому на словах, как бы сделал я. Общий блок (квадрат), внутри 2 блока по 50% по ширине, а внутри второго блока еще 2 блока по 50% по высоте. Каркас готов. Далее ставим всем внутренним блокам overflow: hidden; чтобы фотографии не уходили дальше блоков.
Если завтра никто ответ не даст наглядно покажу

Answer 1

[iBird Rose]

если хочешь чтоб красиво - ставь бэкграундом