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">

目前，根据图像，有时很多都会被切掉。我希望图像缩小，以便可以完全看到。有什么想法吗？

Answer 1

使用background-size: cover;覆盖整个元素，同时保持宽高比：

＆＃13;

special_agg_brand

＆＃13;

.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;
}

＆＃13;

如果要在保持纵横比的同时显示整个图像，请改用background-size: contain;：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

Answer 2

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

但是如果你想用背景图片覆盖整个div并且不介意图像被裁剪，那么请改用background-size:cover;。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

2 个答案: