Соотношение сторон CSS сетка обрабатывает изображения по-разному - PullRequest
Новая
       14

Соотношение сторон CSS сетка обрабатывает изображения по-разному

1 голос
/ 05 мая 2019

Я знаю, что есть несколько существующих вопросов о CSS-сетке с соотношением сторон, но ни один не объясняет мою проблему.

У меня есть сетка, которая масштабируется с некоторым соотношением сторон.Некоторые ячейки будут заполнены содержимым в будущем, в качестве примера я наполнил некоторые ячейки изображением: 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.167fr 0.45fr .225fr 0.3fr 0.8fr;
  grid-template-rows: 0.44fr 0.1875fr 0.4fr .9fr;
  grid-gap: 2vw;
}

.grid figure {
  background: #eee;
}
.grid figure img {
  width: 100%;
  height: 100%;
}

.grid figure:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
<div class="grid">
    <figure>
      <img src="https://picsum.photos/id/237/200/200" />
    </figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
 </div>

Что прекрасно работает (Выполнить фрагмент кода -> открыть полную страницу -> изменить размер браузера для проверки).

Теперь, если я заменюНа первом изображении <figure> макет разбивается.Даже если размер изображения не влиял на размер сетки (поскольку у img есть width:100%;height:100%). 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.167fr 0.45fr .225fr 0.3fr 0.8fr;
  grid-template-rows: 0.44fr 0.1875fr 0.4fr .9fr;
  grid-gap: 2vw;
}

.grid figure {
  background: #eee;
}
.grid figure .test-element {
  width: 100%;
  height: 100%;
}

.grid figure:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
<div class="grid">
    <figure>
      <div class="test-element">Test</div>
    </figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
    <figure></figure>
 </div>

Почему он работает с img, но не работает с другим элементом?

...