如何使用CSS将纵横比保持在16:9和4:3之间？

只要纵横比在给定的限制范围内（如16:9和4:3之间），目标就是渲染一个没有字母框的对象

例如，当16:9图像的可用宽度减小到16:9纵横比以下时，我们希望剪裁图像的左侧和右侧。如果宽度进一步减小到4:3纵横比以下，我们希望保持该纵横比并开始缩小

在本例中，可以看到对象的缩放方式。这种方法的问题是，只要可用空间差一个像素，缩放就会立即发生

.iframe{
边框：1px纯黑；
宽度：350px；
高度：350px；
调整大小：两者；
溢出：自动；
}
.包装纸{
背景色：#c05046；
身高：100%；
显示器：flex；
}
.形象{
保证金：0自动；
最大宽度：100%；
最大高度：100%；
对象匹配：包含；
}

---

如果我正确理解了问题，您希望实现以下目标：

.iframe{
边框：1px纯黑；
宽度：100%；
身高：100%；
}
.集装箱{
宽度：100%；
最大宽度：130vh；
位置：相对位置；
保证金：0自动；
}
.包装纸{
背景色：#c05046；
身高：0；
垫面：75%；
位置：相对位置；
宽度：75%；
左：50%；
转化：translateX（-50%）；
最大宽度：640px；
}
.形象{
位置：绝对位置；
排名：0；
左：50%；
转化：translateX（-50%）；
身高：100%；
}

我相信您想要实现的目标可能必须依靠JS。仅CSS的方法可以用于单个纵横比，但不能用于多个纵横比；在图像上而不是“contain”@BretLipscomb Nice:）它并不能精确地解决2个纵横比，但它简化了第二个示例中的背景图像问题，因此它可以用于任何类型的对象。这非常有效，使用

vh

时依赖于视口的缺点可以通过向

包装器添加
max width
来避免。我把它添加到了你的代码中。