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>

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: <background-position>/<background-size>.那看起来像

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

    height: 150px;
    width: 300px;
}

Answer 2

你应该使用：

.container{
    background-size: 100%;
}