主页 / 问题 / 1255042
Accepted
Руслан Камов
Asked:2022-03-13 00:07:41 +0000 UTC2022-03-13 00:07:41 +0000 UTC

background-size:cover 的工作原理

  • 772

半天我读到了 background-size:cover 属性的值。似乎我的想法是，它沿着块的长度和宽度制作背景，同时保持比例，如果比例不合适，那么图片就会被截断。但这种解释在实践中没有给我任何东西。也许我误解了，因为我不知道如何在实际布局中使用这个定义？

css

1 个回答

  1. Best Answer

    在这里比较：

    .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://isstatic.askoverflow.dev/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>

    • 4

相关问题