Css 在应用“包含/覆盖”之前调整背景图像的大小 一般问题：

我想调整CSS背景图像的大小（不保持纵横比），然后对同一图像应用

背景大小：contain

。如果以另一种方式执行，则会在某种程度上抵消

contain

选项的效果

这可以通过HTML/CSS实现，还是有必要引入Javascript？在我的用例中，事先手动编辑图像是不可行的

我的用例：

我有一些图片，我想显示与改变纵横比侧边或从上到下，这取决于是否横向或纵向模式是积极的。上面的JSFiddle缺少改变大小的功能

我曾尝试使用

transform

应用缩放，但在当前解决方案中，

div.item

的宽度/高度是可变的，因此不太可行

我愿意接受你的建议。我可能试图从错误的角度来处理这个问题。但我不想使用Javascript

---

编辑：在JSFIDLE中使用的示例SVG图像中添加了圆圈。

我不知道您到底想要实现什么，请尝试将背景大小设置为100%，而不是包含如果您可以使用HTML和CSS解决方案，而不仅仅是纯CSS解决方案，那么下面的工作方式是将图像嵌套在

div

中，允许您更有效地拆分弹性项目大小调整样式和图像大小调整样式。您可以在flex项上设置样式，以确定

.image

将包含在其中的框的大小，和/或在

.image

本身上设置宽度和高度，以扭曲图像的纵横比。请注意，为了更有效地执行此操作，我为

.image

创建了容器，而不是在容器上设置固定的宽度和高度。您可以根据需要更改纵横比。我还在背景图像中使用了

img

s而不是

div

s，这使您能够在开箱即用的情况下更好地控制纵横比（即与

div

不同，

img

上的显式宽度和

height:auto；

将保留纵横比，

width:auto；

和显式高度，这在布局从基于行的flexbox布局切换到基于列的布局时非常有用）

将

img

标记而不是

div

s与背景图像一起使用的另一个潜在好处是使用

object-fit:contain；

属性（或者

object-fit:scale-down；

如果希望图像只缩小而不向上缩放）而不是将图像的宽度和高度设置为容器的100%并限制为适当的纵横比，或者在带有背景图像的

div上使用
背景大小：contain；
。有关
对象匹配的参考，请参阅，包括浏览器支持信息

下面是一个工作代码段，其中
img
标记放置在纵横比框中，其纵横比不会在问题请求时保留：


document.body.addEventListener（“单击”，函数（）{
document.body.classList.toggle（“肖像”）；
})；
html，
身体{
身高：100%；
}
.集装箱{
高度：自动；/*您将此设置为100%。如果要约束容器的高度，则还需要约束项目的高度，以确保它们仍然适合内部，即在容器内的项目上放置最大高度：50%*/
宽度：100%；
显示器：flex；
柔性流：行换行；
/*对齐项目：拉伸；*/*对齐项目：拉伸；如果您希望每行/每列有超过1个项目，则可能会导致布局出现问题*/
}
/*身体、肖像、容器{
弯曲方向：立柱；
}*/
.项目{
/*flex-grow:1；*//*flex-grow:1；如果您希望每行/每列有超过1个项目，则同样会导致布局出现潜在问题*/
宽度：50%；/*可以对具有固有宽度的图像使用宽度自动，以让图像大小确定宽度，或者可以像我在这里所做的那样设置显式宽度（对于每行1个图像100%，对于每行2个图像50%，等等）*/
}
.纵横比框外部{
位置：相对位置；
宽度：100%；
身高：0；
填充：0.75%；
保证金：0；
}
.纵横比框内{
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
右：0；
底部：0；
}
.项目.图像{
背景重复：无重复；
背景位置：中心；
背景大小：100%100%；
宽度：100%；
身高：100%；
}
车身.纵向.纵横比框外部{
填充：0133.33333%；
}
/*这些图像是内联SVG，仅供演示之用*/
/*.第一项{
背景图像：url（“数据：image/svg+xml；utf8，”）；
}*/
/*.项目1.2{
背景图像：url（“数据：image/svg+xml；utf8，”）；
}*/

堆栈溢出问题

单击可在横向和纵向模式之间切换。

“alt=”“/>
“alt=”“/>
请注意：在代码片段中使用类似圆圈或其他东西的示例背景图像可能会更有帮助，因为对于纯色矩形，无法通过查看它们来区分它们是倾斜到不同的纵横比还是简单剪裁。如何确定更改的纵横比你想要吗？@kenS说得好。我更新了JSFIDLE。@VAL所需的纵横比是恒定的，并且事先就知道了，目前所有相关图片的纵横比都是相同的。所需的纵横比目前是4:3。谢谢你的回答。不过，我发现你提供的代码解决方案存在一些问题。我需要这些图像来占用在仍然被“包含”的情况下，尽可能多地释放容器的空间，但您的解决方案不会响应窗口的大小调整（请参见my JSFIDLE如何恢复大小）