將不同大小的圖片放入CSS或JS中的縮略圖庫中

不知道我的問題是否能很好地解釋這一點。將不同大小的圖片放入CSS或JS中的縮略圖庫中

我有一個網站，需要在畫廊中顯示我的所有圖像。問題是我有兩種類型的圖像尺寸是一致的。

1） - 1200 X 1800像素 2） - 1200 X 800像素

我想我的畫廊，以類似於此：

而當你點擊他們打開圖像作爲他們的全尺寸。我可以做到這一點，並使它們全尺寸打開，但我的問題是試圖讓這兩個不同大小的圖像看起來正確的盒子佈局。

當使用1尺寸時，我可以使它們成爲固定的寬度和高度，然後只隱藏覆蓋層使它們全部呈方形。但是，當我將其他圖像大小引入混合中時，圖像開始看起來拉長。

有誰知道我可以如何使用純CSS或Javascript/jQuery來實現這個？

來源

2017-03-17 virepo

您可以通過將面板創建爲固定大小的'div'元素來實現。然後，您可以使用'background-image'設置圖像，並根據您的要求將'background'設置爲'cover'或'contain' –

Hi @RoryMcCrossan，我寧願將圖像存在並且不使用css背景如果這是可能的 – virepo

可能的，但更多的工作和更慢的處理，因爲你需要在JS中做它，而以前只是CSS –

嘗試添加

#your_gallery img { 
    max-width: 30%; 
    margin: 15px 1.5%; 
    min-height: 180px; 
    max-height: 180px; 

}

來源

2017-03-17 09:36:11

試試這個代碼

.panel-block { 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.panel-img { 
 
float: left; 
 
    width: calc(100%/3 - 20px); 
 
    height: 141px; 
 
    overflow: hidden; 
 
    margin: 10px; 
 
    display: flex; 
 
    align-items: center; 
 
    background-color: #c5c5c5; 
 
} 
 
.panel-img img { 
 
    width: 100%; 
 
}

<div class="panel-block"> 
 
    <div class="panel-img"> 
 
    <img src="https://dummyimage.com/1200x1800/ddd/fff"/> 
 
    </div> 
 
    <div class="panel-img"> 
 
    <img src="https://dummyimage.com/1200x800/ddd/fff"/> 
 
    </div> 
 
    <div class="panel-img"> 
 
    <img src="https://dummyimage.com/1200x800/ddd/fff"/> 
 
    </div> 
 
    <div class="panel-img"> 
 
    <img src="https://dummyimage.com/1200x1800/ddd/fff"/> 
 
    </div> 
 
    <div class="panel-img"> 
 
    <img src="https://dummyimage.com/1200x1800/ddd/fff"/> 
 
    </div> 
 
    <div class="panel-img"> 
 
    <img src="https://dummyimage.com/1200x800/ddd/fff"/> 
 
    </div> 
 
</div>

來源

2017-03-17 10:09:31 Amal

我認爲要解決這一點的最好辦法是產生正方形縮略圖圖像。你不需要奇怪的JS/CSS，一切都比較簡單，你可以避免直接在圖庫中加載全尺寸的圖片（所以每個有數據計劃的人都會很開心並且頁面加載速度會快很多）

來源

2017-03-17 10:26:09 kaosmos

您可以使用object-fit:cover作爲CSS樣式（顯示不同大小的方框以顯示它採用圖像以適合方框 - 如果您具有不同長寬比的圖像，它們將採用與第一個方框中一樣的方形）：

#a {width:100px; height:100px; object-fit:cover} /* square as in post */ 
 
#b {width:50px; height:100px; object-fit:cover} /* any image and aspect */ 
 
#c {width:100px; height:50px; object-fit:cover} /* ratio adopts automatically. */

<img id=a src="//i.stack.imgur.com/oLiRV.jpg"/> 
 
<img id=b src="//i.stack.imgur.com/oLiRV.jpg"/> 
 
<img id=c src="//i.stack.imgur.com/oLiRV.jpg"/> 
 
<div><h4>Original:</h4><img src="//i.stack.imgur.com/oLiRV.jpg"/></div>

我n JavaScript可以使用類似this的東西。

來源

2017-03-17 10:27:54 K3N

將不同大小的圖片放入CSS或JS中的縮略圖庫中

回答

相關問題