图像上的响应式 div

Question

How can I make a responsive div over a responsive image?

I developed this code, however div does not fully accompany the image.

Can anybody help me?

codePen

HTML

<div class="container-fluid first">
      <div class="row tab-pane Galeria">
        <div class="col-sm-2">
          <a class="d-block mb-4 h-100">
            <img class="Images img-fluid" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt="">
            <div class="ImageText"> Name</div>
          </a>
        </div>
        <div class="col-sm-2">
          <a class="d-block mb-4 h-100">
            <img class="Images img-fluid" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt="">
            <div class="ImageText"> Name</div>         
          </a>
        </div>
        <div class="col-sm-2">
          <a class="d-block mb-4 h-100">
            <img class="Images img-fluid" src="https://source.unsplash.com/EUfxH-pze7s/400x300" alt="">
            <div class="ImageText"> Name</div>
          </a>
        </div>
    </div>

Answer 1

Can you please check out this code, we done minor modification in html and css, we also add some bootstrap classes for better view of the elements. Hope it will work for you.

 .Galeria{ margin-top: 20px; }.image-item{ margin-bottom:20px; }.Images{ border-radius: .25rem; width: 100%; height: auto; border-radius: 8px; cursor: pointer; }.image-block{ position:relative; }.ImageText{ width: calc(100% - 20px); height: auto; background: #F0EDEB 0% 0% no-repeat padding-box; border-radius: 8px 8px 0px 0px; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(50px); position: absolute; bottom: 0; left: 10px; padding: 10px; box-sizing: border-box; font-size: 16px; font-family: "Segoe UI"; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid first"> <div class="row tab-pane Galeria"> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6"> <div class="image-item"> <a class="d-block image-block h-100"> <img class="Images img-fluid" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt=""> <div class="ImageText"> Name</div> </a> </div> </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6"> <div class="image-item"> <a class="d-block image-block h-100"> <img class="Images img-fluid" src="https://source.unsplash.com/aob0ukAYfuI/400x300" alt=""> <div class="ImageText"> Name</div> </a> </div> </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6"> <div class="image-item"> <a class="d-block image-block h-100"> <img class="Images img-fluid" src="https://source.unsplash.com/EUfxH-pze7s/400x300" alt=""> <div class="ImageText"> Name</div> </a> </div> </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6"> <div class="image-item"> <a class="d-block image-block h-100"> <img class="Images img-fluid" src="https://source.unsplash.com/M185_qYH8vg/400x300" alt=""> <div class="ImageText"> Name</div> </a> </div> </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6"> <div class="image-item"> <a class="d-block image-block h-100"> <img class="Images img-fluid" src="https://source.unsplash.com/sesveuG_rNo/400x300" alt=""> <div class="ImageText"> Name</div> </a> </div> </div> <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6"> <div class="image-item"> <a class="d-block image-block h-100"> <img class="Images img-fluid" src="https://source.unsplash.com/AvhMzHwiE_0/400x300" alt=""> <div class="ImageText"> Name</div> </a> </div> </div> </div> </div>

Answer 2

Maybe you can replace img tag with div which has image set as background.

Something like this:

<div class="Images" style="background: url(https://source.unsplash.com/aob0ukAYfuI/400x300)">
   <div class="ImageText"> Name</div>
</div>

.Images {
   position: relative;
   background-size: cover !important;
   width: 90%; 
   height: 100%; 
   border-radius: 10px;
}
.ImageText {
   ...
   width: calc(100% - 46px) !important;
}

Answer 3

You can use the below CSS:

.Galeria a {
 position: relative;
}

.ImageText {
 left: 0;
 width: 100%;
 box-sizing: border-box;
}