Почему при задании блоку свойства display:inline-block схлопывается изображение?

Question

Если будет display: block, то все будет работать как надо.

.block {
  background-image: url(https://i.postimg.cc/8c4ZJRdy/Names-10.jpg);
  height: 700px;
  border: 40px dashed black;
  background-size: cover;
  background-repeat: no-repeat;
  box-sizing: border-box;
  display: block;
}

<div class="block"></div>

Но когда задается display: inline-block, все сжимается. Картинки вообще не видно.

.block {
  background-image: url(https://i.postimg.cc/8c4ZJRdy/Names-10.jpg);
  height: 700px;
  border: 40px dashed black;
  background-size: cover;
  background-repeat: no-repeat;
  box-sizing: border-box;
  display: inline-block;
}

<div class="block"></div>

Разве inline-block без четко заданной ширины, не должен принимать ширину содержимого?

Answer 1

Разве inline-block без четко заданной ширины, не должен принимать ширину содержимого?

Да, должен принимать ширину содержимого.

Но дело в том, что картинка заданная background-image не является содержимым блока. Чтобы она стала содержимым блока, её надо вставлять в блок тегом <img>.

Можно оставить и background-image, но тогда нужны "распорки" для блока. То есть, вставить что-нибудь в этот блок, что будет задавать ему нужную ширину.

.block {
  background-image: url(https://i.postimg.cc/8c4ZJRdy/Names-10.jpg);
  height: 700px;
  border: 40px dashed black;
  background-size: cover;
  background-repeat: no-repeat;
  box-sizing: border-box;
  display: inline-block;
  color: #f00;
}

.block>p {
  width: 300px;
  height: 1px;
  margin:0;
  padding:0;
}

<div class="block">
  <p></p>
  Далее может идти любой нужный контент
</div>

Либо задать ширину блоку можно через min-width:

.block {
  background-image: url(https://i.postimg.cc/8c4ZJRdy/Names-10.jpg);
  height: 700px;
  border: 40px dashed black;
  background-size: cover;
  background-repeat: no-repeat;
  box-sizing: border-box;
  display: inline-block;
  min-width: 300px;
}

<div class="block"></div>

БЛОГ НА HUSL

Почему при задании блоку свойства display:inline-block схлопывается изображение?

Ответы (1 шт):