Question

我在https://jsfiddle.net/ncrcfduz处有以下代码，在https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg处有背景图片。我需要使背景图像重新缩放以适合div，首选显示大部分＆＃34;居中＆＃34;图像中的内容。以下代码仅显示图像的左上角。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

您正在寻找background-size: contain（see the MDN entry），而不是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

您只需在“背景”指示中将“固定”替换为“中心”。

就像那样：

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

JSFiddle：https://jsfiddle.net/ncrcfduz/2/

Answer 3

你应该使用：

.container{
    background-size: 100%;
}

Answer 4

.container{
    background-size: contain;
}

Answer 5

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

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

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

5 个答案:

说明：