Расположите альбомные и портретные изображения с одинаковой высотой

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

И это код, который я пробовал:

HTML

<div class="image-wrapper">
  <div class="image">
    <img src="http://placekitten.com/400/600" />
    </div>
    <div class="image">
    <img src="http://placekitten.com/600/400" />
    </div>
</div>

CSS

.image-wrapper {
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: center;
  flex-direction: row;
  box-sizing: border-box;
  max-height: 700px;
  background-color: yellow;
}

.image {
  background-color: red;
}

.image:first-of-type {
  margin-right: 1rem;
}

img {
  max-height: 100%;
  max-width: 100%;
}

Вот рабочий пример: http://jsfiddle.net/8xaqjp6k/18/ Как ни странно, мой код, а не рабочий пример, отлично работает в Safari, но не в Chrome или Firefox.

0
0
1 453
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Честно говоря, я не уверен, хотите ли вы, чтобы все изображение было одинаковой высоты или просто чтобы красный прямоугольник достигал высоты 700 пикселей. В любом случае попробуйте изменить обертку изображения на:

.image-wrapper {
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: center;
  flex-direction: row;
  box-sizing: border-box;
  min-height: 700px;
  background-color: yellow;
}

Сообщите мне, если вам понадобится дополнительная помощь. Кроме того, если вам нужно только изображение того же размера, а не красное поле, я предлагаю сделать это путем изменения размера изображений, изменение размера изображений с помощью css не идеально и приводит к проблемам с производительностью.

Решение min-height для меня не сработало… тем не менее: Спасибо!

browsergarden 10.08.2018 18:42
Ответ принят как подходящий

Проще всего было бы использовать max-height. Другие вещи, которые вы делаете: 1. Используйте фоновые изображения, затем установите высоту с помощью padding: x% или установите контейнер, который оборачивается вокруг вашего изображения (изображений), а затем скрывает переполнение.

Вы можете использовать:

.image img { max-height:285px } 

Или используйте фоновые изображения:

.image {
   height:0px;
   padding-bottom: 100%;
   overflow: hidden;
   background-size: cover;
   background-position: center;
 }

 <div class="image" style="background-image:url('/img/my-image.jpg')"></div>

Первые предложения просто отлично работают! (Второй даже не пробовал) Спасибо!

browsergarden 10.08.2018 18:41

Другие вопросы по теме