Как предотвратить растягивание элемента div на всю ширину сетки - PullRequest
Новая
       7

Как предотвратить растягивание элемента div на всю ширину сетки

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

Когда я создаю изображение с div-оберткой в ​​сетке следующим образом: 

<div class="grid">
  <div class="wrapper">
    <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>

.grid {  
  display: grid;
  height: 50vh;
}

.wrapper {
  display:inline-block;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid black;
}

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

Div-обертка будет растягивать ширину сетки. Я попытался установить для grid-template-columns значение min-content, но при этом изображение сжимается.

Есть ли способ заставить его вести себя так, как он работает, когда нет сетки? ie. обернуть вокруг изображения? Пример сохраняется здесь на Codepen

ПРИМЕЧАНИЕ. Высота сетки установлена ​​на 50vh. Изображение необходимо сжать до этого размера, сохранив соотношение сторон.

1 Ответ

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

Изображение сжимается, когда вы также устанавливаете его максимальную высоту, замените его на height: auto и сбросьте столбцы сетки-шаблона, как показано ниже. 

.grid {  
  display: grid;
  /* the 100px is completely arbitrary and can be replaced with whatever value */
  grid-template-columns: minmax(100px, max-content);
}

.wrapper {
  display:inline-block;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  border: 1px solid black;
}

img {
  height: auto;
  object-fit: contain;
  max-width: 100%;
}
<div class="grid">
  <div class="wrapper">
    <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>
...