用保持大小的影像填充行內容-有解無憂

我的問題是在引導行中包含影像。當我添加影像時，它不包含適應行的大小，但由于某種原因，它通過激活滾動來遵循其大小。

我希望影像適合容器，而不會在調整影像大小時引起滾動。

這是未在行中添加任何元素時的正確行為：

用保持大小的影像填充行內容

<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>

uj5u.com熱心網友回復：

您可以使用技巧將影像大小調整為 0 的高度和 100% 的最小高度

style="height:0;min-height:100%;"或通過自定義類（更好的做法）

主意：

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row justify-content-center min-vh-100 mh-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   px-0 rounded" style="height:0;min-height:100%;" 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    px-0 rounded" style="height:0;min-height:100%;" 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>

另一種可能性是在容器上設定最大高度

其他可能的例子：

.max-vh-100{max-height:calc(100vh - 2em);}/* takes into account : pt-3 p-s3 pb-3 that could be turned into p-3 */

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row justify-content-center min-vh-100 p-3">
    <div class="col" style="background-color: rgba(0,0,0,.03);">
      <div class="d-flex flex-column h-100 max-vh-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 max-vh-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>

.max-vh-100{max-height:calc(100vh - 2em);}考慮到：pt-3 ps-3 pb-3這可以變成p-3

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/512722.html

標籤：htmlcss图片充满响应式图像

上一篇：使用ForEachSwiftUI回圈兩個不同型別專案（字串和影像）的陣列

下一篇：使用懸停和CSS顯示一半影像