我的 div 在 Bootstrap 4 的大屏幕上拉伸

Question

我的圖像覆蓋在大屏幕上拉伸。 我試過 max-width 但沒有解決方案。 max-width 會破壞小屏幕上的響應能力。

我正在嘗試在圖像上添加過渡，因此當我在圖像上添加 hover 時會出現疊加，但問題是 img-overlay 在大屏幕上被拉長了

 .head-txt { font-size: 50px; color: black; }.resource-img-height { height: 400px; object-fit: cover; }.font-color { color: black; }.font-size-resourse { font-size: 20px; }.resourse-book-txt-width { width: 250px; }.img-overlay { position: absolute; /* max-width: 97%; */ top: 0; bottom: 0; left: 0; right: 0; opacity: 1; transition: 0.5s ease-in; background-color: rgba(0, 0, 0, 0.8); }.book-img-div:hover.img-overlay { opacity: 1; }

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <div class="col-lg-12 mt-1" style="background-color: white;"> <div class="row"> <div class="col-lg-3 img-div-pad-right img-div-pad-left book-img-div"><img src="https://via.placeholder.com/100" class="img-fluid resource-img-height" alt=""> <div class="img-overlay vw-100"></div> </div> <div class="col-lg-3 my-auto"> <h5 class="font-color mt-1">Book</h5> <h1 class="font-color mt-1">Product Leadership</h1> <p class="font-color mt-3 resourse-book-txt-width font-size-resourse">How Top Product Managers Launch Awesome Products and Build Successful Teams.</p> </div> <div class="col-lg-3 img-div-pad-right img-div-pad-left book-img-div"><img src="https://via.placeholder.com/100" class="img-fluid resource-img-height" alt=""> <div class="img-overlay"></div> </div> <div class="col-lg-3 my-auto"> <h5 class="font-color mt-1">Book</h5> <h1 class="font-color mt-1">Product Leadership</h1> <p class="font-color mt-3 resourse-book-txt-width font-size-resourse">How Top Product Managers Launch Awesome Products and Build Successful Teams.</p> </div> </div> </div>

Answer 1

添加一些額外的 CSS 圖像參數（見下文）。

覆蓋 CSS 參數沒問題（但設置不透明度：0）。

我們認為 DIV 放置順序不正確，因為文本需要放在里面才能堆疊（請參見下面的示例）。

將 class col-lg-3 放入其中后，可能（也可能不需要）進行更改。

我們使用 JS 注釋來更容易地查看關閉 DIV 的排列。

下面的示例僅使用一個 (col-lg-3) 個帶有圖像的 DIV 集。

 .resource-img-height {
  display: block;
  width: 100%;
  /*--height: auto;--*/
  height: 400px;
  object-fit: cover;
 }

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: 0.5s ease-in;
  background-color: rgba(0, 0, 0, 0.8);
 }

 <div class="col-lg-3 img-div-pad-right img-div-pad-left book-img-div"><img src="https://via.placeholder.com/100" class="img-fluid resource-img-height" alt="">
    <div class="img-overlay vw-100">
        <div class="col-lg-3 my-auto">
            <h5 class="font-color mt-1">Book</h5>
            <h1 class="font-color mt-1">Product Leadership</h1>
            <p class="font-color mt-3 resourse-book-txt-width font-size-resourse">How Top Product Managers Launch Awesome Products and Build Successful Teams.</p>
        </div><!--// End text-->
    </div><!--// End overlay-->
</div><!--// End column container and image-->