如何保持背景图像的宽高比？ [重复]

This question already has an answer here:

这个问题在这里已有答案:

Set size on background image with CSS? 18 answers

使用CSS在背景图像上设置大小? 18个答案

I've tried to look at other answers but no help. My background is dynamic so the size of images will change, so I need to keep aspect ratio so the whole image is seen. here's my CSS:

我试着看看其他答案,但没有帮助。我的背景是动态的,因此图像的大小会发生变化,因此我需要保持纵横比,以便看到整个图像。这是我的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">

At the moment depending on the image, sometimes alot of it is cut off. I want the image to be downsized so it can be seen fully. Any idea?

目前,根据图像,有时很多都会被切断。我希望图像缩小,以便可以完全看到它。任何想法?

2 个解决方案

#1

Use background-size: cover; to cover the entire element, while maintaining the aspect ratio:

使用背景大小:封面;覆盖整个元素,同时保持纵横比:

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

If you want to display the entire image, while maintaining the aspect ratio, use background-size: cover; instead:

如果要在保持纵横比的同时显示整个图像,请使用background-size:cover;代替:

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

#2

Use background-size:contain; if you want to see the whole image and stretch it to the full width or height (depends on the aspect ratio of the image) of the div.

使用background-size:contains;如果你想看到整个图像并将其拉伸到div的全宽或高度(取决于图像的纵横比)。

But if you want to cover the whole div with the background-image and don't mind the image getting cropped then use background-size:cover; instead.

但是如果你想用背景图像覆盖整个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">

#1