帶「堆疊」圖像的圖庫

我不想在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

來源

2016-03-05 Mark Titorenkov

據我所知，你不能用純css和html。你看過[masonry]（http://masonry.desandro.com/）嗎？ – Yass

嘿，這看起來不錯。我一直在尋找這樣的東西。謝謝。我只是想知道在瀏覽器中沒有啓用javascript的情況下會發生什麼情況。 –

缺少JavaScript將打破砌體佈局。 – Yass

我發現我在純CSS中需要什麼。所以如果有人需要它，這裏是鏈接。 https://css-tricks.com/seamless-responsive-photo-grid/

來源

2016-03-05 14:14:01

嘗試使用

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>

來源

2016-03-05 10:09:51 hakkurishian

謝謝，我會試試這個。 –

帶「堆疊」圖像的圖庫

回答

相關問題