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>

正如您所看到的那样，它会拉伸原始图像，而我希望它只关注背景图像的一部分而不会拉伸或调整大小。

Answer 1

100% 100% background-size值表示背景应拉伸（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>

防止div拉伸其背景图像

1 个答案: