CSS如何在3:1的矩形div中容纳不同宽高比和不同大小的图像？

要在3:1的矩形div中容纳不同宽高比和不同大小的图像，可以使用CSS的背景图像和背景大小属性来实现。

首先，设置矩形div的宽度和高度为固定值，比如300px宽和100px高。然后，将图像作为div的背景图像，并设置背景大小属性为contain。

.div {
  width: 300px;
  height: 100px;
  background-image: url('image.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

这样设置后，无论图像的宽高比和大小如何，都会被等比例缩放并完整地显示在矩形div中。背景大小属性的contain值会保持图像的宽高比，并将图像缩放到适应div的尺寸。

如果需要将图像居中显示，可以使用背景位置属性设置为center。

对于不同的宽高比和大小的图像，可以根据实际情况调整矩形div的大小，以保证图像在div中完整显示。同时，可以使用CSS的媒体查询来适应不同的屏幕尺寸和设备。

推荐的腾讯云相关产品：腾讯云对象存储（COS） 腾讯云对象存储（COS）是一种安全、低成本、高可靠的云端存储服务，适用于存储和处理各种类型的非结构化数据，包括文本、图片、音频、视频等。它提供了简单易用的API接口和丰富的功能，可以满足各种存储需求。

产品介绍链接地址：https://cloud.tencent.com/product/cos