html - 防止 div 拉伸(stretch)其背景图像

Question

我的样式表中有一个带有背景图像的 div，定义如下:

.information_photo {
  position: relative;
  top: 30px;
  width: 100%;
  height: 200px;
  background-image: url('http://www.ladyblitz.it/wp-content/uploads/2015/04/carbonara.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

<div class="information_photo"></div>

如您所见，它会拉伸(stretch)原始图像，而我希望它只关注背景图像的一部分，而不拉伸(stretch)或调整它的大小。

Answer 1

100% 100% background-size 值表示背景应拉伸(stretch) (100%) 元素宽度和 (100%) 元素高度元素。将它们中的任何一个设置为 auto，这将自动调整未定义尺寸的大小，同时保持图像纵横比。

然后您可以通过调整相应的 background-position 样式来选择图像的哪一部分可见。

.information_photo {
  position: relative;
  top: 30px;
  width: 100%;
  height: 200px;
  background-image: url('http://www.ladyblitz.it/wp-content/uploads/2015/04/carbonara.jpg');
  background-repeat: no-repeat;
  background-position: center -30px; /* Visible 30 px from the top */

  /* 100% height, auto width */
  background-size: auto 100%;

  /* 100% width, auto height */
  background-size: 100% auto;
  /* or simply */
  background-size: 100%;
}

<div class="information_photo"></div>