Question

我不想在CSS中创建一个图库。图像不能被裁剪，但需要具有相同的宽度。我不希望他们站在一边而是站在另一边。我已经提供了我想要它的样子的图像。底部是每个图像的描述。现在的标记和CSS是这样的：

<div class="thumbnail">    
<a  title="img1" href="images/img1.jpg" data-lightbox="gallery1">
<img src="images/img1.jpg" alt="img1">
<p>img1</p>
</a>
</div>

<div class="thumbnail">    
<a  title="img2" href="images/img2.jpg" data-lightbox="gallery2">
<img src="images/img2.jpg" alt="img2">
<p>img2</p>
</a>
</div>


.thumbnail {
     width: 300px;
 }

The layout i want to get
This is what i have now

Answer 1

尝试使用

height: auto

使用这样的布局来实现您的图像缩放。

 <style type="text/css">
    .col{       
        width:300px;
        float:left;
        margin: 5px;
    }
    .col img{       
        width:100%;;
        height:auto;
    }
    </style>
<div class="col">
<img src="img0.png" />
<br/><br/>
<img src="img1.png"  />
</div>
<div class="col">
<img src="img0.png"  />
<br/><br/>
<img src="img1.png" />
</div>

Answer 2

我在纯CSS中找到了我需要的东西。所以，如果有人需要它，这就是链接。 https://css-tricks.com/seamless-responsive-photo-grid/

画廊与＆＃34;堆叠＆＃34;图片

2 个答案: