Instagram克隆开发中如何让不同尺寸图片适配div、避免卡片拉伸

问题根源 #

• 你当前设置的img样式为width:100%+height:auto，图片高度会随原始比例自适应变化，导致父容器高度不固定，直接拉伸卡片
• 右侧col-sm-3列额外设置了固定宽度325px，破坏了Bootstrap栅格的响应式规则，且没有和左侧轮播列做高度对齐，所以会出现错位
• 没有对图片做适配容器的裁剪处理，不同尺寸的图片无法统一展示效果

解决方案 #

1. 给轮播外层容器固定统一的宽高比，推荐使用CSS的aspect-ratio属性设置为Instagram常用的1:1正方形比例，也可以根据需求调整为4:5等比例
2. 给轮播内的图片添加object-fit: cover属性，让图片等比例缩放后填满容器，超出部分自动裁剪，不会出现拉伸变形
3. 移除右侧列写死的固定宽度，给行容器添加align-items-stretch类，让左右两列高度自动保持一致
4. 右侧卡片设置height:100%，自动适配列的高度，不会出现错位

修改后的代码 #

<div class="mx-auto w-75">
    <div class="card my-3">
        <div class="card-body p-0">
            <!-- 给行添加align-items-stretch，让左右列高度对齐 -->
            <div class="row align-items-stretch">
                <div class="col-sm-8 ms-2 mb-0 ps-1 pe-0">
                    <!-- 给轮播容器固定宽高比1:1，你也可以改成4/5 -->
                    <div id="carouselExampleFade" class="carousel m-0 slide carousel-fade" style="aspect-ratio: 1/1;" data-bs-ride="carousel">
                        <div class="carousel-inner h-100">
                            <div class="carousel-item active h-100">
                                <!-- 图片添加object-fit: cover，移除height:auto，设置高度100% -->
                                <img src="{% static 'images/post-1.jpg' %}" class="d-block w-100 h-100" style="object-fit: cover;" alt="">
                            </div>
                            <div class="carousel-item h-100">
                                <img src="{% static 'images/profile-1.jpg' %}" class="d-block w-100 h-100" style="object-fit: cover;" alt="">
                            </div>
                            <div class="carousel-item h-100">
                                <img src="{% static 'images/profile-2.jpg' %}" class="d-block w-100 h-100" style="object-fit: cover;" alt="">
                            </div>
                        </div>
                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
                        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
                    </div>
                </div>
                <div class="col-sm-3 p-0">
                    <!-- 移除固定宽度，设置height:100%适配列高度 -->
                    <div class="card pt-0 h-100" style="padding:16px; margin-top:-1px;">
                        <div class="card-body">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

低版本浏览器兼容方案 #

如果需要兼容不支持aspect-ratio的旧版本浏览器，可以用padding-top法实现固定宽高比：

.carousel-container {
  position: relative;
  padding-top: 100%; /* 1:1比例，4:5的话设置为125% */
  height: 0;
}
.carousel-container .carousel-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

内容的提问来源于stack exchange，提问作者Piyush Dive