CSS背景图片-缩小以适应固定大小的div

Question

我有以下代码在https://jsfiddle.net/ncrcfduz，以及一个背景图像在https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg。我需要使背景图片重新缩放以适应div，最好展示图像中“居中”内容的大部分。以下代码仅显示图像的左上角。

.container {
  background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 150px;
  width: 300px;
}

<div class="container">
</div>

- user1187968

---

“居中”内容是什么意思？ - Turi S.

请使用"background-size: contain"。 - kinakuta

这是相关的：https://dev59.com/62Eh5IYBdhLWcg3w_nyv 使用 background-attachment: fixed 属性，图像相对于视口而非包含元素进行大小调整。 - Turi S.

Answer 1

你正在寻找background-size: contain(请参阅MDN条目)，而不是cover。为了使你的示例正常工作，你将不得不放弃background-attachment: fixed。使用background-position:center来将背景居中在你的div中。

.container{
    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
    
    height: 150px;
    width: 300px;
}

<div class="container">
</div>

注:

• 现在你几乎不需要浏览器前缀，因此可以直接使用background-size: contain。请参见https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Browser_compatibility

• 如果您使用了Autoprefixer（包括在许多构建工具和构建设置中），它会自动为您添加任何必要的前缀版本，这意味着即使当前版本的主流浏览器仍然需要前缀，您也可以使用background-size: contain。

• 您可以使用语法background: <background-position>/<background-size>在background简写属性中包含大小。看起来像是：

.container{
    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center/contain;

    height: 150px;
    width: 300px;
}

- henry

Answer 2

你应该使用：

.container{
    background-size: 100%;
}

- Anonoymous

Answer 3

您只需要将“fixed”替换为“center”在您的“background”指令中。

像这样：

background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center;

这里是JSFiddle链接：https://jsfiddle.net/ncrcfduz/2/

- AymericM

Answer 4

.container{
    background-size: contain;
}

- Codemaker

Answer 5

这个技巧应该可以工作，但默认情况下它不会保持图像的纵横比。

background-size: 100% 100%;

- Sharhabeel Hamdan

Answer 6

我是这样解决的。你可以像这样设置你的代码：

<div style="background-image: url('your_url') ;background-size: 100% 100%; "> <div>

- Yavuz Yoldaş