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

我正在开发一个网站并遇到问题Here 由于类或图像尺寸，图像/容器下的空白空间？

服务图像都在它们和容器底部之间有少量空白。我搜索过，看到过类似的问题（但它并不明显，他们使用引导程序或一些响应框架），也使用萤火虫来找出是什么导致问题（并尝试实施其他建议帖子）...

我不确定问题是类（萤火虫说不），或者它只是“.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>

来源

2016-11-09 Tonyobyo

你在说'service-text-bg-img'类吗？ – DominicValenciana

添加margin-bottom：-3px;到你的service-img-bg类中_seemed to_ fix it，但是在调整它的大小时会回来一点。当图像旁边的文字由于宽度缩小而不得不高度增长时，会出现这种情况，这会使图像的行太高。 – Sam07

对不起，我应该已经规定了...... service-img-bg有正确的高度，子类class service-main-img是其中没有填充高度的图像，因此留下空白。似乎它是由于图像的尺寸，但问题并不总是存在，所以我不确定。 – Tonyobyo

[class^="imghvr-"], [class*=" imghvr-"]使这个class的财产display: block，而不是display: inline-block

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

来源

2016-11-09 19:05:44

圣地狱我不能相信我错过了...非常感谢你！ – Tonyobyo

我们ll @Jim Fahad不是100％正确的，您不需要设置img display:block，您只需制作img块元素 - 从而可以抑制默认的display:inline或display:inline-block。

要做到这一点，你可以设置display:block如提及，但也display:table或display:flex将工作，甚至例如float:left。

来源

2016-11-09 19:24:49

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

回答

相关问题