如何按比例缩放背景图片以覆盖整个屏幕，并增加额外的缩放因子？

Question

我有一个背景图片，我想使用 background-size: cover; 来覆盖元素。但我还想在两个方向上将其缩放110%，超出了 cover 的范围，以便我随后可以使用 background-position 移动它。

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

有没有一种纯 CSS 的方法来实现这样的效果？

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

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

- ptomato

---

你想让图片占据整个屏幕吗？例如，宽度和高度都是100%？ - Matthew

Answer 1

我为您创建了一个Fiddle链接，您可以查看：http://jsfiddle.net/msechrest/2z2aw5u0/。我认为我正确理解了问题，但如果我有偏差，请告诉我。

我将具有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，看看是否符合你的需求，或者至少是朝着正确方向发展的，请随意在示例中进行尝试。

希望这能对你有所帮助！

编辑：我删除了转换和填充，因为它们不是必需品。

如果你想使用固定高度的容器来做到这一点，你可以将.hero-container的高度更改为500像素或其他数值，然后在#hero div的高度设置中使用110%即可。

- Matthew

---

我fork了你的fiddle并且玩弄它：http://jsfiddle.net/tq2mn8ad/ 我认为这是实现我想要的最简单的方式。我希望能够在没有额外div的情况下完成，但如果没有人提供更好的答案，我会给你打勾。 - ptomato

我很高兴我至少能帮上一点忙。我只是发现用这种方式做会兼容性好，而且非常简单。 - Matthew

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>

- Megrax