Установка изображения `width: 0` скрывает его, в то время как` width: 0% `также заставляет его занимать пространство - PullRequest
Новая
       13

Установка изображения `width: 0` скрывает его, в то время как` width: 0% `также заставляет его занимать пространство

0 голосов
/ 02 января 2019

Изображение внутри элемента контейнера, имеющего определенный display тип , ведет себя по-разному при использовании правил стиля img { width: 0; } или img { width: 0%; }.

Увеличение значения width с использованием любой единицы, кроме %, дало такой же ожидаемый результат (img занимает только показанную его часть).

Я пытался изменить тип контейнера display, в котором находится img. Результат показан ниже.

Контейнер display типы, в которых img отображается не так, как ожидалось :

  1. -webkit-рядный коробок
  2. встроенный блок
  3. рядный прогибается
  4. рядный сетка
  5. встроенный стол
  6. таблица
  7. таблица-клетка
  8. таблица-рядная группа
  9. таблица заголовок-группа
  10. настольная сноска-группа

Не уверен, как они связаны друг с другом, возможно, я что-то упускаю. 

button:first-of-type img {
  width: 0;
}

button:last-of-type img {
  width: 0%;
}
<h3>The image width: 0 (hides it)</h3>

<button>
      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">
      <p>Add playlist</p>
</button>


<h3>The image width: 0% (occupies the space (natural img width) and hides it)</h3>

<button>
      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">
      <p>Add playlist</p>
</button>

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

. img { width: 0; }. *1064*.

Ответы [ 2 ]

0 голосов
/ 02 января 2019

Как сказал @Talmid в своем ответе, мы сталкиваемся со сложным вычислением, и использование width:0 и width:0% не одно и то же.

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

Эта проблема будет происходить со всеми элементами, где у нас есть сокращение-to-fit поведение (float, inline-block и т. д.)

Вот еще примеры: 

img {
  width: 30%;
}

span {
  border: 1px solid;
  display: inline-block;
}
<span>
      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">
</span>

<span style="float:left;">
      <img src="https://www.kilobaitas.lt/Images/design/KilobaitasLogo2.gif">
</span>

Это также может происходить с элементами без изображения: 

span  {
  display:inline-block;
  border:1px solid red;
}
<div style="float:left;border: 1px solid;">
      <span >some text</span>
</div>
<div style="float:left;border: 1px solid;clear:left;">
      <span style="width:30%;">some text</span>
</div>
<div style="float:left;border: 1px solid;clear:left;">
      <span style="width:0%;">some text</span>
</div>

По сути, браузер сначала определяет размер содержащего блока (на этом шаге мы не учитываем процентное значение, определенное в свойстве width объектадочерний элемент).Логически размер содержащего блока будет определяться его содержимым (поведение сжатия к размеру).После этого мы можем разрешить процентное значение на основе ширины, рассчитанной ранее, таким образом, дочерний элемент будет сжиматься.

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

В случае, если дочерний элемент использует не-процентное значение (длина), браузер сначала учитывает его при определении ширины содержащего блока, поскольку это не относительное значение, а абсолютное: 

span  {
  display:inline-block;
  border:1px solid red;
}
<div style="float:left;border: 1px solid;">
      <span >some text</span>
</div>
<div style="float:left;border: 1px solid;clear:left;">
      <span style="width:30px;">some text</span>
</div>
<div style="float:left;border: 1px solid;clear:left;">
      <span style="width:0;">some text</span>
</div>
0 голосов
/ 02 января 2019

Ширина контейнера определяется шириной img, которая является процентом от ширины контейнера, которая определяется шириной img, которая ... (круговая ссылка).

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

Хотя, кажется, что особый случай 0% можно рассматривать как 0px, но, возможно, это не для того, чтобы соответствовать поведению для других указанных процентных значений.

...