如何缩放背景图像以覆盖，乘以额外的缩放因子？

Question

我有一张背景图片，我想使用 background-size: cover; 覆盖该元素，但是，我还想在两个方向上将其放大 110%，beyond cover 的作用，以便我随后可以使用 background-position.

移动它

换句话说，我希望 background-size: cover 将周围 div 视为在两个方向上都大 110%。

有没有办法只在 CSS 中做到这一点？

如果我没理解错的话，这是一种方法，但是max()不标准CSS3:

background-size: max(auto 110%) max(auto 110%);

Answer 1

我创建了一个 Fiddle 供您查看。我相信我正确理解了这个问题，但如果我不对请告诉我。

我将具有 background-image 的 div 包裹在另一个 div 中，如下所示：

<div class="hero-container">
    <div class="row" id="hero"></div>
</div>

并像这样应用样式：

.hero-container {
    overflow: hidden;
    width: 100%;
    height: 100vh;
}
#hero {
    background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    width: 100%;
    height: 110vh;
    margin-bottom: 0px;
    right: 0;
}

通过更改 height: 110vh 来尝试 fiddle，让我知道这是否是您正在寻找的，或者我是否至少在正确的轨道上。

希望对您有所帮助！

编辑*：我删除了过渡和填充，因为它们不是必需的。

如果您想使用具有固定高度的容器执行此操作，您可以将 .hero-container 高度更改为 500px 或其他值，然后在 [= 的高度中使用 110% 而不是 110vh 15=] div.

Answer 2

如果我没有正确理解你的问题，我想你可以试试下面这个：

.box {
  width: 40vw;
  height: 40vh;
  background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center;
  background-size: cover;
}

.box:hover {
  background-size: 140%;
}

<div class="box"></div>

如何缩放背景图像以覆盖，乘以额外的缩放因子？

How to scale a background image to cover, times an extra scaling factor?

css

background-size