1

пол дня читаю про значение свойства background-size:cover. Вроде бы в голове отложилась мысль, что оно фон делает по длине и ширине блока, сохраняя пропорции, и если пропорции как то не получаются, то картинка урезанной получается. Но эта ничего не дает мне на практике такая трактовка. Может я не так понял , потому что я понятие не имею как с таким определением в реальной верстки это использовать?

0

1 ответ 1

4

Вот сравните:

.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    width: 1020px;
}

.block {
  margin: 5px;
  width: 500px;
  height: 200px;
  border: 2px solid gray;
  background: url(https://i.stack.imgur.com/qQoD4.jpg) no-repeat;
}

.block_one {
  background-size: auto;
}

.block_two {
  background-size: cover;
}

.block_three {
  background-size: contain;
}

.block_for {
  background-size: 100% 100%;
}
<div class="container">

<div>
background-size: auto;
<div class="block block_one"></div>
</div>

<div>
background-size: cover;
<div class="block block_two"></div>
</div>

<div>
background-size: contain;
<div class="block block_three"></div>
</div>

<div>
background-size: 100% 100%;
<div class="block block_for"></div>
<div>

</div>

2
  • Спасибо огромное за проделанную работу. 12 мар 2021 в 20:07
  • Sevastopol' мне показалось или cover по большей части пропорционирует, а contain по меньшей? 12 мар 2021 в 20:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.