将图像直接渲染到div宽度

I have a image gallery which is not straighting/fullfilling the full width in a row

我有一个图像库,它不是连续/完全填充整个宽度

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 is also not working . There is 6 images here

display:table-cell也无法正常工作。这里有6张图片

3 个解决方案

#1

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

<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>

#2

From what I understood (since you have not mentioned the image size.)

从我的理解(因为你没有提到图像大小。)

.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>

#3

Add Below css

在css下面添加

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

DEMO