Как я могу получить изображение, чтобы соответствовать размеру ячейки сетки? - PullRequest
Новая
       11

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

1 голос
/ 15 апреля 2020

Я хочу разместить изображение в ячейке так, чтобы размер изображения определялся размером ячейки, а не наоборот. Я пытался сделать это так: 

.app-container {
  width: 100vw;
  height: 100vh;
}

.info {
  display: grid;
  min-height: 0;
}

.image-box {
  display: grid;
  min-height: 0;
}

img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  grid-row: 1;
  grid-column: 1;
}
<div class="app-container">
  <div class="info">
    <div class="image-box" style="grid-row-start: 1; grid-column-start: 1;">
      <img src="https://images.unsplash.com/photo-1482003297000-b7663a1673f1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
    </div>
  </div>
</div>

Но изображение всегда отображается в исходном размере и не масштабируется. Что мне не хватает? Полный пример JSFiddle здесь

1 Ответ

0 голосов
/ 15 апреля 2020

Изображения нелепо сложны в макетах Grid и Flex. Я не уверен, что это потому, что Grid и Flex являются новыми технологиями, а браузеры еще не полностью адаптировали их к давнему тегу <img>. Или, может быть, это что-то еще. Но суть: это отстой в работе с изображениями в технологиях CSS3. При тестировании каждой перестановки в каждом крупном браузере нужно пробовать разные вещи, потому что нет гарантии согласованности.

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

Вот пересмотренная версия вашего кода (без изменений HTML):

Протестировано в Chrome, Firefox и Edge. 

.image-box {
  height: 50vh;
  border: 2px solid red;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
    " demo1 image demo2 "
    " demo1 image demo2 "
    " demo1 image demo2 ";
}

.image-box > div:first-child {
  grid-area: demo1;
  background-color: lightgreen;
}

.image-box > div:nth-child(2) {
  grid-area: image;
  min-width: 0;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-box > div:last-child {
  grid-area: demo2;
  background-color: aqua;
}

.app-container {}
.info {}
<div class="app-container">
  <div class="info">
    <div class="image-box">
      <div>demo item 1</div>
      <div><img src="https://images.unsplash.com/photo-1482003297000-b7663a1673f1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
      </div>
      <div>demo item 2</div>
    </div>
  </div>
</div>

jsFiddle demo

...