Bootstrap缩略图图像间距

时间:2016-01-04 22:29:37

标签: html css image twitter-bootstrap

我有一个奇怪的问题。出于某种原因,我的缩略图中的图像不会“填充”缩略图图像部分。缩略图边框与图像之间有一些间距。Problem

我正在尝试移除您在iamges周围看到的空白区域。我已经尝试了width: 100%

 .thumbnail img {
    width: 100%;
}

    .thumbnail {
    box-shadow: 0 0 23px black;
}

我希望img一直走到缩略图的边缘

HTML代码

<div class="col-md-9">
                        <div class="row hidden-xs hidden-sm">
                            <img src="../images/Signs/SignsFrontPageBanner.gif" class="img-rounded  header" style="max-width: 100%; ">
                        </div>

                        <div class="row">

                            <h1 id="featured">Sign Templates</h1>

                            <div col="col-md-8 col-md-offset-2">
                                <div class="btn-group btn-breadcrumb">
                                    <a href="http://inksigns.com/InkSigns/index.html" class="btn btn-default"><i class="glyphicon glyphicon-home"></i></a>
                                    <a href="#" class="btn btn-default active">Signs</a>
                                </div>
                            </div>
                            <div class="col-sm-4 col-lg-3 col-md-4">
                                <div class="thumbnail backgroundhover">
                                    <a href="RealEstateSigns/RealEstateSign-index.html"><img src="../images/RealEstate/RealEstateSignThumbnail.gif" class="img-rounded"></a>
                                    <div class="caption">
                                        <h4 class="pull-right"></h4>
                                        <h4 style="text-align: center;"><a href="RealEstateSigns/RealEstateSign-index.html">Real Estate</a>
                            </h4>
                                        <p>Take a look at our wide assortment of Real Estate Signs & Accessories.</p>
                                    </div>

                                </div>
                            </div>

                            <div class="col-sm-4 col-lg-3 col-md-4">
                                <div class="thumbnail backgroundhover">
                                    <a href="../Banners/GeneralBanners.html"><img src="../images/Banners/BannerThumbnail.gif" class="img-rounded "></a>
                                    <div class="caption">
                                        <h4 class="pull-right"></h4>
                                        <h4 style="text-align: center;"><a href="../Banners/GeneralBanners.html">Banners</a>
                            </h4>
                                        <p>Take a look at our wide assortment of Banners.</p>
                                    </div>

                                </div>
                            </div>

                            <div class="col-sm-4 col-lg-3 col-md-4">
                                <div class="thumbnail backgroundhover">
                                    <a href="../Magnets/magnets-index.html"><img src="../images/Magnets/FrontPageMagnetThumbnail.gif" class="img-rounded "></a>
                                    <div class="caption">
                                        <h4 class="pull-right"></h4>
                                        <h4 style="text-align: center;"><a href="../Magnets/magnets-index.html">Magnets</a>
                            </h4>
                                        <p>Take a look at our wide assortment of magnets.</p>
                                    </div>

                                </div>
                            </div>

                            <div class="col-sm-4 col-lg-3 col-md-4">
                                <div class="thumbnail backgroundhover">
                                    <a href="Decals/DecalSigns-index.html"><img src="../images/Decals/DecalsThumbnail.gif" alt="" class="img-rounded "></a>
                                    <div class="caption">
                                        <h4 class="pull-right"></h4>
                                        <h4 style="text-align: center;"><a href="Decals/DecalSigns-index.html">Decals</a>
                            </h4>
                                        <p>Take a look at our wide assortment of Decals.</p>
                                    </div>

                                </div>
                            </div>

1 个答案:

答案 0 :(得分:1)

我通过将padding: 0px !important;添加到.thumbnail修复了问题,它需要!important