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

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

用于覆盖整个元素，同时保持纵横比：

.background-1，
.背景-2，
.背景-3{
/*设置背景图像、大小和位置*/
背景图像：url（'//via.placeholder.com/350x150'）；
背景尺寸：封面；
背景位置：中心；
/*或者，使用背景快捷方式*/
背景：url（'//via.placeholder.com/350x150'）中心/封面；
利润率：20px；
边框：1px实心rgba（0,0,0,0.3）；
}
.背景-1{
宽度：300px；
高度：200px；
}
.背景-2{
宽度：200px；
高度：50px；
}
.背景-3{
宽度：100px；
高度：200px；
}

---

使用

背景尺寸：包含

如果希望查看整个图像并将其拉伸到div的全宽或全高（取决于图像的纵横比）

但是如果你想用背景图像覆盖整个div，并且不介意图像被裁剪，那么使用

background size:cover取而代之


.image\u submit\u div{
边框：1px实心#ccc；
显示：内联块；
填充：20px 50px；
宽度：55%；
高度：320px；
光标：指针；
背景：url（'http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg“）；/*这会改变*/
边际：0.25px；
背景重复：无重复；
背景位置：中心；
背景尺寸：包含；
}
我试过他们说的（背景大小：200px 50px；）或背景大小：100%100%）；它仍然不起作用——仍然切断了大部分图片。对于仍然试图解决这个问题的人，我想出了一个解决方案。有一个内部带有img标签的div，将img src设置为图像url，但将“可见性”设置为隐藏。然后将包含div的背景图像url设置为图像url以及要包含的背景大小。隐藏图像保持div与图像和背景图像的比例，完美地填充div。这非常有效，谢谢！无论它现在显示完整图像的大小。仅供参考，
封面
可能会隐藏部分图像
contain
将在提供的空间中显示整个图像。
cover
不保持纵横比，否？@simPod根据，是的。@JacobGray有趣，它确实这样说。只是运行代码片段在这里显示了倾斜的背景图像。并说如果有必要，它会拉伸图像