Question

我只想感谢大家的帮助，如果不是因为你们这些人的持续乐于助人，我将永远不会学到这么多。

我正在尝试制作一些四向垂直“拼贴”的某些图像，每张图片之间没有空格，在调整窗口大小等时完全响应。我遇到的问题是每张照片之间的空间;我想弄清楚如何在每个之间不留空间。

当调整窗口大小时，我也会遇到一个问题，即图像从上面的狮子图像中流出，并产生更多的空白区域或填充而不会粘到狮子图像上。当调整大小时，它也会开始重叠狮子图像。

.image {
  background-image: url(https://s-media-cache-ak0.pinimg.com/originals/31/91/d7/3191d75f03ba7d4c570358870c855ed7.jpg);
  background-repeat: no-repeat;
  height: 850px;
  background-size: 100%;
}

#collage {
  width: 90%;
}

<div class="image">
  <ul id="nav">
    <li id="brand"><a href="#">MINIMAL</a></li>
    <li id="navm"><a href="#">Men</a></li>
    <li id="navm"><a href="#">Women</a></li>
    <li id="navm"><a href="#">Contact</a></li>
  </ul>

  <h1>Simplicity is Minimal</h1>

  <div id="home">
    <a href="#" id="homeb">Shop Now</a>
  </div>
</div>

<div class="row">
  <div class="col-md-3" align="center">
    <img id="collage" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Panthera_tiger_in_a_marshy_area_in_captivity.jpg">
  </div>

  <div class="col-md-3" align="center">
    <img id="collage" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Panthera_tiger_in_a_marshy_area_in_captivity.jpg">
  </div>

  <div class="col-md-3" align="center">
    <img id="collage" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Panthera_tiger_in_a_marshy_area_in_captivity.jpg">
  </div>

  <div class="col-md-3" align="center">
    <img id="collage" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Panthera_tiger_in_a_marshy_area_in_captivity.jpg">
  </div>


</div>

Answer 1

你需要添加以下css，我希望它有效.-

*{
    margin:0px;
    padding:0px;
}
.image {
    height: auto;
}
body img {
    display: block;
}`

位置4图像垂直响应无填充

1 个答案: