Почему не отображается: блок для элемента <img>устанавливает пространство, которое будет зарезервировано, как другие элементы? - PullRequest
Новая
       33

Почему не отображается: блок для элемента <img>устанавливает пространство, которое будет зарезервировано, как другие элементы?

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

img {
  background-color: lightblue;
  display: block;
}

.d1 {
  background-color: blue;
}

.s1 {
  background-color: orange;
  display: block;
}
<img src="https://placehold.it/50x20">
<div class="d1">Test1</div>
<span class="s1">Test2</span>

Выше я экспериментирую со свойством display: block; для различных тегов. Я установил его на img и span, но, как я вижу, изображение не расширено в крайнее правое положение, как span ... Почему это так? Ты

Ответы [ 3 ]

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

Для точного объяснения вам нужно обратиться к спецификации, а точнее к части, имеющей дело с замененным элементом блочного уровня , поскольку img является заменяемым элементом 1 , имеющим вычисляемыйзначение дисплея, равное блоку:

Используемое значение width определяется как для встроенных заменяемых элементов. Затем для определения полей применяются правила для незаменяемых элементов уровня блока. ref

Затем для встроенных замененных элементов

Если height и width оба имеют вычисленные значения auto, а элемент также имеет внутреннюю ширину, то эта внутренняя ширина является используемым значением 'ширины'.

Ширина вашего изображения равна 50px, поэтому оно будет использоваться. Вы можете только переопределить его, явно указав другую ширину (100%, если вы хотите использовать полную ширину)

span и div являются незаменяемыми элементами, поэтому их ширина определяется следующим образом:

Среди используемых значений других свойств должны соблюдаться следующие ограничения:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

Если для width установлено значение auto, любоедругие 'auto' значения становятся 0, а 'width` следует из полученного равенства. ref

У вас все значение установлено на auto, поэтому мы устанавливаем все 0 и получаем width = width of containing block, что соответствует вашему поведению по всей ширине.

Содержащий блок в вашем случае в основном является родительским элементом:

Положение и размер блока (ов) элемента иногда вычисляются относительно определенного прямоугольника,называется содержащий блок элемента. Содержащий блок элемента определяется следующим образом:

...

Для других элементов, если позиция элемента «относительная» или «статическая», содержащий блок формируется краем содержимого блока предка контейнера ближайшего блока. ref

1 Подробнее о заменяемом элементе:

Элемент, содержимое котороговыходит за рамки модели форматирования CSS, например изображения или встроенного документа. Например, содержимое элемента HTML img часто заменяется изображением, которое обозначает его атрибут src. Замененные элементы часто имеют внутренние размеры: внутреннюю ширину, внутреннюю высоту и внутреннее соотношение. .. ref

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

Поскольку ширина тега img ориентируется на загружаемую ширину изображения. Если вы хотите изменить размер в блоке с полной шириной, вам нужно добавить атрибут width со значением 100%. Но вы увидите ... высота тега изображения также изменится, чтобы предотвратить соотношение сторон. 

<html>
<head>
<style>
<!--
img {
  background-color: lightblue;
  display: block;
  width: 100%;
}

.d1 {
  background-color: blue;
}

.s1 {
  background-color: orange;
  display: block;
}
-->
</style>
</head>
<body>
<img src="https://placehold.it/50x20">
<div class="d1">Test1</div>
<span class="s1">Test2</span>
</body>
</html>
0 голосов
/ 18 октября 2019

Если параметры ширины / высоты отсутствуют, изображение отображается с исходным размером, независимо от настройки display, как в вашем примере. Если вы хотите, чтобы он растягивался на всю ширину своего контейнера, вы должны добавить width: 100% 

img {
  background-color: lightblue;
  display: block;
  width: 100%;
  height: auto;
}

.d1 {
  background-color: blue;
}

.s1 {
  background-color: orange;
  display: block;
}
<img src="https://placehold.it/50x20">
<div class="d1">Test1</div>
<span class="s1">Test2</span>
...