Question

当窗口尺寸变小而不使图像拉伸有趣时，如何使图像缩小。我希望图像的大小能够自动调整，使其在各种尺寸下看起来都很正常。

.frontpage{
  background: url('https://static.pexels.com/photos/168/apple-iphone-laptop-notebook.jpg');
  background-size: 100% 100%;
min-height:1000px;
}

JSFiddle Link

Answer 1

对background-size使用值contain，它会调整容器范围内包含的背景

＆＃13;

div {
  background-image:url(http://placekitten.com/g/256/256);
  background-size:contain;
  background-repeat:no-repeat;
  border:1px solid lime;
}

.first {
  width:50%;
  height:100px;
}

.second {
  width:256px;
  height:60px;
}

.third {
  width:200px;
  height:350px;
}

＆＃13;

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

＆＃13;

Answer 2

简单，使用background-size: cover：

.frontpage{
  background: url('https://static.pexels.com/photos/168/apple-iphone-laptop-notebook.jpg');
  background-size: cover;
  background-position: center center;
min-height:1000px;
}

JSFiddle

Answer 3

好吧，你只需尝试以下风格

  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;

这将使背景图像宽度为100％，高度将以正确的比例自动生成。

您还可以尝试其他选项，例如

background-size: contain;

或

background-size: cover;

调整窗口大小时图像缩小

3 个答案: