Как сохранить одинаковую высоту изображения в жидких CSS-сетках? - PullRequest
Новая
       57

Как сохранить одинаковую высоту изображения в жидких CSS-сетках?

0 голосов
/ 26 марта 2019

Я совершенно новичок в сетках CSS.Мне нужно кодировать компонент из 2 столбцов, с текущими изображениями равной высоты внутри.Я мог бы сделать это с flexbox, но на этот раз мне нужна сетка CSS, и она должна быть отзывчивой.

Тем не менее, этот компонент имеет 2 изображения, по 1 на столбец.Исходные файлы img имеют одинаковую высоту (340x300, 708x300).Мне нужно показать им около 30% и 70% ширины, минус разрыв.Я пытался использовать как 'auto', так и fr юниты, тоже вместе взятые, но безуспешно.

На последней / большой точке останова все в порядке:

enter image description here

Проблема возникает при использовании точек останова меньшего размера: я не могуоставьте 2 изображения одинаковой точной высоты (сделайте их масштабированными с одинаковой высотой):

enter image description here

Вот некоторый код, одна из версий.Но любая вариация этого кода (различные комбинации единиц) создает некоторые проблемы, и ни одна из них не заставляет меня иметь изображения одинаковой высоты: 

.images-block-box{

  display: grid;
  grid-gap: 16px;
  grid-template-columns: auto auto;
  //grid-template-columns: 1fr auto;
  //grid-template-columns: 1fr 2fr;
  //grid-template-columns: 33.333% 66.666%;
}

А-а, и, очевидно, изображения текучие (max-width:100%; height: auto).

Как решить?

Ответы [ 2 ]

3 голосов
/ 26 марта 2019

Исходные файлы img имеют одинаковую высоту (340x300, 708x300).

Вы можете использовать тот факт, что дробные единицы работают в пропорциях из предметов.Поэтому используйте grid-template-columns: 340fr 708fr , если файл изображений не изменится .Смотри демо ниже: 

.images-block-box{
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 340fr 708fr;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
<div class="images-block-box">
  <img src="https://via.placeholder.com/340x300"/>
  <img src="https://via.placeholder.com/708x300"/>
</div>
0 голосов
/ 26 марта 2019

Это мой ответ. Трюк использует img{object-fit: cover;}

.wrap{
  width:100vw;
  display:grid;
  grid-template-columns:3fr 7fr;
  grid-gap:1em;
}
.a img{width:100%;height:100%;object-fit: cover;}
<div class="wrap">
 <div class="a">
   <img src="http://via.placeholder.com/340x300" />
 </div> 
 <div class="a">
   <img src="http://via.placeholder.com/708x300" />
 </div>   
</div>
...