如何让图片按2/3宽高比适配div且宽度占父容器100%

要实现类名为carouselMap的图片宽度占满carouselItem容器、同时保持2/3的宽高比，可按以下方式调整代码：

核心CSS调整 #

你的基础代码已经设置了关键属性，只需补充适配细节即可：

.carouselItem {
  width: 100%;
  height: 100%;
  border: 1px solid black;
  /* 可选：隐藏图片超出容器的部分 */
  overflow: hidden;
}

.carouselMap {
  width: 100%;
  /* 强制保持2:3的宽高比，高度会自动按宽度计算 */
  aspect-ratio: 2/3;
  /* 控制图片适配方式，避免变形 */
  object-fit: cover;
}

属性说明 #

• width: 100%：确保图片宽度完全填充父容器carouselItem的宽度。
• aspect-ratio: 2/3：固定图片宽高比为2:3，无需手动计算高度，浏览器会根据宽度自动推导。
• object-fit: cover：当图片本身比例与2:3不符时，裁剪图片边缘以填满容器，同时保持图片比例不变；若需要完整显示图片（容器留白），可替换为object-fit: contain。
• overflow: hidden：配合object-fit: cover使用，隐藏图片超出容器的裁剪部分，避免页面布局混乱。

内容的提问来源于stack exchange，提问作者Jonas Barth