Показывать встроенный блок, не растущий горизонтально, если у ребёнка заполнение в процентах - PullRequest
Новая
       29

Показывать встроенный блок, не растущий горизонтально, если у ребёнка заполнение в процентах

1 голос
/ 08 октября 2019

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

article {
  background: fuchsia;
  display: inline-block;
}

img {
  padding: 5%;
}
<article>
  <img src="https://fakeimg.pl/412x412"/>
</article>

CodePen: https://codepen.io/Yarmolaev/pen/xxxbeJr

1 Ответ

0 голосов
/ 08 октября 2019

Это использование процентного значения, которое учитывает ширину родительского элемента в качестве ссылки. Здесь у вас есть своего рода цикл, поскольку ширина также зависит от содержимого.

В этом случае браузер игнорирует заполнение, чтобы найти ширину контейнера на основе его содержимого, а затем вычисляется заполнение на основеэта ширина и добавлена ​​к изображению, чтобы создать переполнение. Браузер не вернется, чтобы изменить ширину контейнера, потому что это будет бесконечный цикл.

Единственный способ исправить это - рассмотреть фиксированные значения: 

article {
  background: fuchsia;
  display: inline-block;
}

img {
  padding: 10px;
}
<article>
  <img src="https://fakeimg.pl/412x412"/>
</article>

Подробнее здесь: https://www.w3.org/TR/css-sizing-3/#percentage-sizing

Это произойдет в большинстве случаев, когда вы используете процентное значение и гдеРазмер контейнера зависит от его содержимого (поведение сжатия к размеру).

Другой пример, когда изображение занимает 50% от его первоначальной ширины, используемой для определения размера контейнера: 

article {
  background: fuchsia;
  float:left;
}

img {
  width:50%;
}
<article>
  <img src="https://fakeimg.pl/412x412"/>
</article>

Схожие вопросы в похожих ситуациях:

Почему процентное заполнение нарушает мой элемент flex?

CSS Grid - ненужный разрыв слов

A hack , который работает в Chrome, если вы хотите сохранить использование процентного заполнения, чтобы рассмотреть невидимую анимациюэто снова вызовет вычисление ширины, и у вас больше не будет переполнения: 

article {
  background: fuchsia;
  display: inline-block;
}

img {
  padding: 5%;
  animation:change 0.3s infinite;
}

@keyframes change{
  to {
    padding:5.01%;
  }
}
<article>
  <img src="https://fakeimg.pl/412x412"/>
</article>
...