CSS 如何保持背景图像的纵横比？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41559817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to keep aspect ratio of a background-image?
提问by Zorgan
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
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?
目前，根据图像，有时会切断很多图像。我希望图像缩小，以便可以完全看到。任何的想法？
回答by Jacob Gray
Use background-size: cover;to cover the entire element, while maintaining the aspect ratio:
使用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>If you want to display the entire image, while maintaining the aspect ratio, use background-size: contain;instead:
如果要显示整个图像，同时保持纵横比，请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>回答by ab29007
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:contain;，如果你想看到整个图像，并将其延伸到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">