Question

如何在响应式图像上进行响应式div？

我开发了这段代码，但是div并没有完全伴随图像。

有人可以帮助我吗？

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

能否请您检查这段代码，我们在html和css中进行了较小的修改，我们还添加了一些引导程序类以更好地查看元素。希望它对您有用。

.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

也许您可以将img标签替换为已将图片设置为背景的div。

类似这样的东西：

<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

您可以使用以下CSS：

.Galeria a {
 position: relative;
}

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

图像上的div响应

3 个答案: