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

【问题标题】：How to scale a background image to cover, times an extra scaling factor?如何缩放背景图像以覆盖，乘以额外的缩放因子？
【发布时间】：2015-12-02 20:12:03
【问题描述】：

我有一个背景图像，我想使用 background-size: cover; 覆盖元素但是，我还想在两个方向上将其放大 110%，超越cover确实如此，以便我随后可以使用background-position 移动它。

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

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

如果我理解正确，这将是一种方法，但 max() 不是标准 CSS3：

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

【问题讨论】：

你想让图片占据整个屏幕吗？前任。 100% 宽度和高度？

标签： css background-size

【解决方案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 来玩弄小提琴，让我知道这是否是您正在寻找的，或者我是否至少在正确的轨道上。

希望这会有所帮助！

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

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

【讨论】：

我叉了你的小提琴并正在玩它：jsfiddle.net/tq2mn8ad我认为这是获得我想要的最简单的方法。我希望在没有额外 div 的情况下做到这一点，但如果没有人提出更好的答案，我会给你打勾。
我很高兴至少能帮上一点忙。我只是发现这样做可以兼容并且仍然非常简单。

【解决方案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%;
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：