Question

我正在开发一个网站并遇到问题Here

服务图像在它们与容器底部之间都有少量空白区域。我搜索了SO并且看到过类似的问题（但是他们使用bootstrap或者一些响应式框架并不明显）并且还使用了firebug来找出导致问题的原因（并尝试实现在另一个上找到的建议）帖）...

我不确定问题是否是一个类（萤火虫说不），或者它只是“.img-responsive”类和图像尺寸的组合。

如果有人可以看一眼并对此提供一些见解，那将非常有帮助并且非常感激。谢谢！

找到问题的HTML如下：

.service-img-bg {
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 service-img-bg pull-right">
  <figure class="imghvr-slide-left">
    <img class="img-responsive service-main-img hidden-md" src="media/services-icons/offered-service-img.png" alt="Hologlass">
    <img class="img-responsive service-main-img visible-md" src="media/services-icons/offered-service-img-sm.png" alt="Hologlass">
    <figcaption>
      <a class="video-image playVideo" href="https://www.youtube.com/embed/Q4QI3VyC5p4?rel=0&amp;showinfo=0" data-toggle="lightbox" data-title="3D Mapping Demonstration">
        <i class="fa fa-search overlay-icon"></i>
      </a>
    </figcaption>
  </figure>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 wow slideInLeft pull-left service-text-bg-img">
  <div class="col-md-12 service-text-container">
    <h5 style="padding:0 0 15px;">HOLOGRAPHIC</h5>
    <p>Our method of applying specialized light absorbing film-- and in some high-ambient lighting situations, low voltage autodimming electrochromic film-- to a transparent substrate of glass, acrylic or polycarbonate transforms these common surfaces into
      a display that truly commands stopping power. We’ve developed a solution that is a head turning alternative to traditional digital signage that is suitable for storefronts, wayfinding and interactive multi-touch or touchless concepts.
      <br>
      <br>Our lineup offers a full range of rear, front &amp; dual projection applications. Both rigid and film based surfaces custom built to spec, with additional iturnkey installation services your project which include specialty mounting, adhesions and
      even massive ‘Holoboard’ structures up to 40 feet wide.</p>
    <div class="page-scroll">
      <a href="#footerBlock" class="inquire-link">
        <button class="inquire-btn">INQUIRE NOW</button>
      </a>
    </div>
  </div>
</div>

Answer 1

[class^="imghvr-"], [class*=" imghvr-"]制作此class的属性display: block，而不是display: inline-block

在这里看到它解决了http://prntscr.com/d57tkc

Answer 2

好吧@Jim Fahad不是100％正确，你不需要设置img black / white，你只需要制作img块元素 - 从而抑制默认public function getDates() { return []; }或{{ 1}}。

为此，您可以按照提及的方式设置display:block，但display:inline或display:inline-block也可以，或者甚至是display:block。

图像/容器下的空白区......由于类或图像尺寸？

2 个答案: