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