如何保持背景图片的宽高比？

Question

我尝试过查看其他答案但没有帮助。我的背景是动态的，因此图像的大小会改变，所以我需要保持宽高比以便整个图像都能显示。这是我的CSS：

.image_submit_div {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 20px 50px;
    width: 55%;
    height: 320px;
    cursor: pointer;
    background: url('something.jpg'); /* this changes */
    margin: 0 0 25px;

}

HTML

<label for="id_image" class="image_submit_div">

目前，根据图片的大小不同，有时会出现很多内容被裁剪的情况。我希望将图片缩小，以便能够完整地观看。有任何想法吗？

- Zorgan

---

我尝试了他们说的(background-size: 200px 50px;)或者(background-size: 100% 100%);但仍然不起作用 - 图片仍然被裁剪了大部分。 - Zorgan

对于仍在尝试解决此问题的任何人，我想出了一个可靠的解决方案。创建一个带有图像标签的 div，将 img src 设置为您的图像 URL，但将“visibility”设置为隐藏。然后将包含 div 的背景图像 URL 也设置为您的图像 URL，并将背景大小设置为 contain。隐藏的图像保持 div 与您的图像的比例，而背景图像则完美地填充了 div。 - Michael Brown

如果您有多个背景图像，例如渐变加上图像，则可以仅定义一个大小并将另一个设置为自动：background-size: 40% auto, 100% 100%; - Johannes

Answer 1

使用background-size: cover;将背景图像覆盖整个元素，同时保持长宽比例：

.background-1,
.background-2,
.background-3 {
  /* Set the background image, size, and position. */
  background-image: url('//via.placeholder.com/350x150');
  background-size: cover;
  background-position: center;

  /* Or, use the background shortcut. */
  background: url('//via.placeholder.com/350x150') center/cover;

  margin: 20px;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.background-1 {
  width: 300px;
  height: 200px;
}

.background-2 {
  width: 200px;
  height: 50px;
}

.background-3 {
  width: 100px;
  height: 200px;
}

<div class="background-1"></div>
<div class="background-2"></div>
<div class="background-3"></div>

如果您想显示整个图像，并保持纵横比，请改用background-size: contain;：

.background-1,
.background-2,
.background-3 {
  /* Set the background image, size, position, repeat, and color. */
  background-image: url('//via.placeholder.com/350x150');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fbfbfb;

  /* Or, use the background shortcut. */
  background: #fbfbfb url('//via.placeholder.com/350x150') no-repeat center/contain;

  margin: 20px;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.background-1 {
  width: 300px;
  height: 200px;
}

.background-2 {
  width: 200px;
  height: 50px;
}

.background-3 {
  width: 100px;
  height: 200px;
}

<div class="background-1"></div>
<div class="background-2"></div>
<div class="background-3"></div>

- Jacob G

---

这个完美运作，谢谢！无论大小，现在都显示完整的图像。 - Zorgan

请注意，cover 可能会隐藏图像的一部分。而 contain 则会在所提供的空间中显示整个图像。 - Cully

“cover” 不保持纵横比，对吧？ - simPod

根据W3规范，是的，@simPod。 - Jacob G

@JacobGray 很有趣，它确实是这样说的。只是“运行代码片段”在这里显示了扭曲的背景图像。而且Mozilla说如果需要会拉伸图片。 - simPod

Answer 2

如果你想看到整个图片并将其拉伸到div的完整宽度或高度（取决于图像的纵横比），请使用 background-size:contain;。

但是，如果你想要用背景图片覆盖整个div，并不在意图片被裁剪，则应改用 background-size:cover;。

.image_submit_div {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 20px 50px;
    width: 55%;
    height: 320px;
    cursor: pointer;
    background: url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg'); /* this changes */
    margin: 0 0 25px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

<label for="id_image" class="image_submit_div">

- ab29007