将图像直接渲染到div宽度

Question

我有一个图像库，它不是直接/全部填充行的全宽

HTML

<div class="col-md-6">
<figure class="gallery">
    <img src="images/blog_1.png" alt="img">
    <img src="images/blog_1.png" alt="img">
    <img src="images/blog_1.png" alt="img">
    <img src="images/blog_1.png" alt="img">
    <img src="images/blog_1.png" alt="img">
    <img src="images/blog_1.png" alt="img">
</figure>
</div>

CSS

.gallery{
    display:table;
 }
 .gallery img{
     display: inline-block;
     padding: 2px;
     background: transparent;
 }

display:table-cell也无效。这里有6张图片

Answer 1

＆＃13;

＆＃13;

.gallery{
    display:table;
    white-space: nowrap;
 }
 .gallery img{
     display: inline-block;
     padding: 2px;
     background: transparent;
    
 }

＆＃13;

<div class="col-md-6">
<figure class="gallery">
    <img src="http://placehold.it/100x100" alt="img" />
    <img src="http://placehold.it/100x100" alt="img" />
    <img src="http://placehold.it/100x100" alt="img" />
    <img src="http://placehold.it/100x100" alt="img" />
    <img src="http://placehold.it/100x100" alt="img" />
    <img src="http://placehold.it/100x100" alt="img" />
</figure>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

根据我的理解（因为你没有提到图像尺寸。）

.gallery{
 }
.gallery > div{
    padding:2px;
}
 .gallery img{
     background: transparent;
    width:100%;
 }

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="gallery row">
    <div class="col-xs-2">
    <img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
    </div>
    <div class="col-xs-2">
    <img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
        </div>
    <div class="col-xs-2">
    <img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
        </div>
    <div class="col-xs-2">
    <img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
        </div>
    <div class="col-xs-2">
    <img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
        </div>
    <div class="col-xs-2">
    <img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" alt="img"/>
        </div>
</div>
</div>

Answer 3

在css下面添加

    .gallery{
    display:table;
    margin:0;
      }

DEMO