Bootstrap行内图片溢出问题：如何让图片适配容器无滚动

无法将图片限制在Bootstrap的row容器内。添加图片后，图片不会自适应row的尺寸，而是保持自身大小，导致页面出现滚动条。希望图片能完全适配容器，调整尺寸时不会触发滚动。

未添加图片时的正常表现 #

<div class="container-fluid">
    <div class="row justify-content-center min-vh-100 pt-3 ps-3 pb-3">

        <div class="col" style="background-color: rgba(0,0,0,.03);">

            <div class="d-flex flex-column h-100">


                <div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">

                    <div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">

                        <div class="align-self-center mx-auto">
                            <button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
                                <i class="fa fa-plus text-dark"></i>
                            </button> 
                        </div>

                    </div>

                </div>


                <div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">

                    <div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">

                        <div class="align-self-center mx-auto">
                            <button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
                                <i class="fa fa-plus text-dark"></i>
                            </button> 
                        </div>

                    </div>

                </div>



            </div>

        </div>

        <div class="col" style="background-color: rgba(0,0,0,.03);">


            <div class="d-flex flex-column h-100">


                <div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">

                    <div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">

                        <div class="align-self-center mx-auto">
                            <button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
                                <i class="fa fa-plus text-dark"></i>
                            </button> 
                        </div>

                    </div>

                </div>


                <div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">

                    <div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">

                        <div class="align-self-center mx-auto">
                            <button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
                                <i class="fa fa-plus text-dark"></i>
                            </button> 
                        </div>

                    </div>

                </div>


            </div>


        </div>


    </div>
</div>

添加图片后的异常表现 #

<div class="container-fluid">
    <div class="row justify-content-center min-vh-100 pt-3 ps-3 pb-3">

        <div class="col" style="background-color: rgba(0,0,0,.03);">

            <div class="d-flex flex-column h-100">



                <div class="row  flex-grow-1 h-50 slot border border-3 rounded " slot="1">
                    <img class="img-responsive w-100 h-100  px-0 rounded"  src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
                </div>


                <div class="row  flex-grow-1 h-50 slot border border-3 rounded " slot="1">
                    <img class="img-responsive w-100 h-100  px-0 rounded"  src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
                </div>



            </div>

        </div>

        <div class="col" style="background-color: rgba(0,0,0,.03);">


            <div class="d-flex flex-column h-100">


                <div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">

                    <div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">

                        <div class="align-self-center mx-auto">
                            <button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
                                <i class="fa fa-plus text-dark"></i>
                            </button> 
                        </div>

                    </div>

                </div>


                <div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">

                    <div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">

                        <div class="align-self-center mx-auto">
                            <button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
                                <i class="fa fa-plus text-dark"></i>
                            </button> 
                        </div>

                    </div>

                </div>


            </div>


        </div>


    </div>
</div>

针对这个问题，可通过以下几步调整让图片完全适配容器：

1. 替换过时的图片类：img-responsive是Bootstrap 3的类，Bootstrap 4+请使用img-fluid，它会自动设置max-width: 100%; height: auto;，确保图片不会超出容器宽度。

2. 给图片容器添加溢出隐藏：给包含图片的row容器添加overflow-hidden类，即使图片因比例问题超出容器高度，也会被裁剪，不会出现滚动条。

3. 保持图片比例并填满容器：如果希望图片按比例缩放且完全填满容器，给图片添加object-fit: cover;样式，避免图片拉伸变形。

修改后的代码示例：

<div class="container-fluid">
    <div class="row justify-content-center min-vh-100 pt-3 ps-3 pb-3">

        <div class="col" style="background-color: rgba(0,0,0,.03);">

            <div class="d-flex flex-column h-100">

                <div class="row flex-grow-1 h-50 slot border border-3 rounded overflow-hidden" slot="1">
                    <img class="img-fluid w-100 h-100 rounded" style="object-fit: cover;" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
                </div>

                <div class="row flex-grow-1 h-50 slot border border-3 rounded overflow-hidden" slot="1">
                    <img class="img-fluid w-100 h-100 rounded" style="object-fit: cover;" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
                </div>

            </div>

        </div>

        <!-- 右侧列代码保持不变 -->
        <div class="col" style="background-color: rgba(0,0,0,.03);">
            <div class="d-flex flex-column h-100">
                <div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
                    <div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
                        <div class="align-self-center mx-auto">
                            <button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
                                <i class="fa fa-plus text-dark"></i>
                            </button> 
                        </div>
                    </div>
                </div>
                <div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
                    <div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
                        <div class="align-self-center mx-auto">
                            <button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
                                <i class="fa fa-plus text-dark"></i>
                            </button> 
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

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