图片被拉伸变形是因为.carousel-item默认height: auto且无明确高度来源，需为.carousel或.carousel-inner设置min-height（如min-height: 60vh），再令.carousel-item继承height: 100%，图片设width: 100%; height: 100%; object-fit: cover。
图片被拉伸变形，是因为.carousel-item默认不设高
Bootstrap的.carousel本身不强制子项高度，.carousel-item是position: relative且height: auto，导致内部<img alt="Bootstrap轮播图Carousel的图片高度如何用CSS固定？" >按原始宽高比渲染，父容器高度塌陷。此时仅给<img alt="Bootstrap轮播图Carousel的图片高度如何用CSS固定？" >设height: 100%没用——它没有可参照的高度来源。
正确做法是让.carousel-item获得明确高度，再让图片填满它：
- 给
.carousel或.carousel-inner设min-height（推荐），避免内容为空时高度丢失 -
.carousel-item设height: 100%继承父级高度 -
.carousel-item img设height: 100%; width: 100%; object-fit: cover;，确保铺满且不畸变
示例CSS：
.carousel {
min-height: 400px;
}
.carousel-item {
height: 100%;
}
.carousel-item img {
height: 100%;
width: 100%;
object-fit: cover;
}
用object-fit: cover还是contain？看业务需求
object-fit: cover会裁剪图片以填满容器，适合强调视觉冲击的轮播；object-fit: contain保持完整图像但可能留白，适合产品图、证件照等需信息完整的场景。
立即学习“前端免费学习笔记（深入）”；
注意：object-fit在IE中不支持，如需兼容IE，得用背景图方案（见下一条）。
- 用
cover时，关键内容别放在图片边缘，裁剪风险高 - 用
contain时，务必配合background-color或占位色，否则白底+小图显得空 - 若必须兼容IE，放弃
<img alt="Bootstrap轮播图Carousel的图片高度如何用CSS固定？" >，改用background-image+background-size: cover
响应式高度怎么设？别只靠固定px
纯min-height: 400px在手机上会撑出巨大空白。更稳妥的是结合视口单位和断点：
- 移动端优先：用
min-height: 60vh，保证至少占屏60% - 配合媒体查询，在
sm及以上断点切回min-height: 400px - 如果轮播图下方有文字/按钮，预留足够空间，避免内容被遮挡
例如：
.carousel {
min-height: 60vh;
}
@media (min-width: 576px) {
.carousel {
min-height: 400px;
}
}
为什么加了height还是没生效？检查这几个地方
常见失效原因不是CSS写错，而是DOM结构或Bootstrap版本干扰：
- 确认没漏掉
.carousel-inner这个必要包裹层——Bootstrap 5要求必须存在，否则.carousel-item无法正确继承高度 - 检查是否有其他CSS重置了
.carousel-item的display（比如误设为display: block !important），它默认是display: none（非激活项），激活项才display: block - Bootstrap 5.3+ 默认启用了
data-bs-ride="carousel"自动初始化，若手动JS初始化过，可能触发两次，造成样式短暂错乱 - Vue/React项目中，若轮播图组件动态渲染，确保CSS在组件挂载后已加载，而非仅依赖全局样式表顺序
最简验证法：临时加一句.carousel-item { background: #eee; }，看灰色块是否撑开——没撑开说明高度源头没设对，不是图片问题。
