如何在图像中创建响应式 div？答案

【问题标题】：How to create responsive div in image?如何在图像中创建响应式 div？
【发布时间】：2017-06-08 14:24:46
【问题描述】：

我正在尝试创建一个响应式容器，其中包含一个图像和一个在图像上带有一些文本的 div。像这样的：

.tileimage {
  position: absolute;
  width: 100%;
  height:auto;
  color: white;
}

.tileseven {
  position: absolute;
  width: 100%;
  height:auto;
}

<div className="container">
  <img className="col-lg-12 tileimage" src="./tile.jpg" alt=""/>
  <div className="col-lg-12 tileseven">
      <img className="" src="./logo.png" alt=""/>
      <p>this is some text</p>
  </div>
</div>

如何使logo.png 响应？当我调整浏览器大小时，图像会调整大小但徽标不会调整？另外，如何将div.tileseven 叠加在底部的图像上？

【问题讨论】：

如果您使用引导程序，请尝试将类“img-responsive”添加到图像标签

标签： html css responsive-design

【解决方案1】：

看看这个！！！尝试测试一下。 //

<!DOCTYPE html>
<html>
<head>
<style>
  div.gallery {
      border: 1px solid #ccc;
  }

  div.gallery:hover {
      border: 1px solid #777;
  }

  div.gallery img {
      width: 100%;
      height: auto;
  }

  div.desc {
      padding: 15px;
      text-align: center;
  }

  * {
      box-sizing: border-box;
  }

  .responsive {
      padding: 0 6px;
      float: left;
      width: 24.99999%;
  }

  @media only screen and (max-width: 700px){
      .responsive {
          width: 49.99999%;
          margin: 6px 0;
      }
  }

  @media only screen and (max-width: 500px){
      .responsive {
          width: 100%;
      }
  }

  .clearfix:after {
      content: "";
      display: table;
      clear: both;
  }
</style>
</head>
<body>

  <h2>Responsive Image Gallery</h2>
  <h4>Resize the browser window to see the effect.</h4>

  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="img_fjords.jpg">
        <img src="img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
      </a>
      <div class="desc">Add a description of the image here</div>
    </div>
  </div>

  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="img_forest.jpg">
        <img src="img_forest.jpg" alt="Forest" width="600" height="400">
      </a>
      <div class="desc">Add a description of the image here</div>
    </div>
  </div>

  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="img_lights.jpg">
        <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
      </a>
      <div class="desc">Add a description of the image here</div>
    </div>
  </div>

  <div class="responsive">
    <div class="gallery">
      <a target="_blank" href="img_mountains.jpg">
        <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
      </a>
      <div class="desc">Add a description of the image here</div>
    </div>
  </div>

  <div class="clearfix"></div>

  <div style="padding:6px;">
    <p>This example use media queries to re-arrange the images on different screen sizes: for screens larger than 700px wide, it will show four images side by side, for screens smaller than 700px, it will show two images side by side. For screens smaller than 500px, the images will stack vertically (100%).</p>
  </div>
</body>
</html>

【讨论】：

【解决方案2】：

为了调整徽标的大小，您需要引用图像而不仅仅是包含 div

.tileseven img {
     height: auto;
     width: 100%;
 }

至于保持它在顶部，你总是可以在那里放一个 z-index。

【讨论】：

【解决方案3】：

您可以通过将徽标的宽度定义为 100% 来使徽标具有响应性。下面是css：

.tileseven img {
   width: 100%;
}

让 div.tileseven 在 CSS 中使用 left、top 和 z-index 叠加播放。

【讨论】：