Question

目前，如果我的浏览器只是显示器尺寸的一半，它会缩小背景以适应宽度，切断高度和底部。我喜欢它，保持高度，填充整个页面，并保持纵横比，但只是将照片居中并切断照片的两侧，我目前的CSS只是

body{
    background-image: url("/background1.jpg");
    background-size: 100%;
    background-repeat:no-repeat;
    display: compact;
}

任何有关如何做到这一点的帮助都会很棒，谢谢

Answer 1

background-size: cover;

应该做你需要的。非常优雅地处理裁剪/缩放。

Answer 2

在该规则中使用background-size: auto 100%;：

body {
    background: url("/background1.jpg") center center no-repeat;
    background-size: auto 100%;
}

第一个参数（在background-size中）是宽度，第二个参数是图像的高度。如果只有一个参数（如规则中所示），浏览器会假设它的宽度并将高度设置为auto。我的版本应该给你全高并自动调整宽度（并使图像居中）

Answer 3

添加background-size: cover应该剪切并保持宽高比。

添加background-position: center;会将图片保留在中心位置。

（替换div的规则并将其放到body - 我在这里仅使用div作为示例代码）

请参阅下面的运行示例

＆＃13;

div {
  background-image: url("http://placehold.it/1000/1000");
  /* Resizes image to fill div; retains aspect ratio. */ 
  background-size: cover;  
  background-repeat: no-repeat;
  background-position: center;
  min-height: 2000px;
}

＆＃13;

<div>
  Lorem Ipsum
</div>

＆＃13;

Bootstrap CSS：中心背景，全高，截止宽度

3 个答案: