CSS调整div大小，同时保持包含图像的纵横比

可以通过以下方式实现：

使用padding-top百分比：将div的padding-top属性设置为一个百分比值，该百分比值应该与图像的纵横比相匹配。这样可以保持div的高度与图像的高度成比例。例如，如果图像的纵横比为4:3，可以将div的padding-top设置为75%（3/4 * 100%）。

.div-container {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 根据图像的纵横比调整百分比值 */
}

.div-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图像填充整个div容器 */
}

使用伪元素和绝对定位：通过使用伪元素和绝对定位，可以在div中创建一个占位符，并将其宽度设置为一个百分比值，以保持图像的纵横比。然后，将图像绝对定位在占位符上。

.div-container {
  position: relative;
  width: 100%;
}

.div-container::before {
  content: "";
  display: block;
  padding-top: 75%; /* 根据图像的纵横比调整百分比值 */
}

.div-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图像填充整个div容器 */
}

以上两种方法都可以实现调整div大小并保持图像纵横比的效果。根据具体需求选择其中一种即可。

推荐的腾讯云相关产品：腾讯云对象存储（COS）