html/css：網格圖像具有不同的高度 - 爲什麼圖像沒有正確包裝？

我正在研究以下基於Wordpress的web項目：http://udkdev.skopec.de/category/projekte/html/css：網格圖像具有不同的高度 - 爲什麼圖像沒有正確包裝？

正如你所看到的，有一個網格用於發佈/發佈縮略圖。其他人已經在所有縮略圖都是相同高度的前提下進行設置。我想改變它，以便縮略圖可以具有不同的高度並正確包裝，而不會在圖像排列的行之間創建整體。我可以通過更改當前版本來做到這一點，還是必須爲網格設置一個全新的方法？

來源

2017-08-16 JoSch

問題尋求代碼幫助必須包括必要的重現它最短的代碼**的問題本身**最好在** Stack Snippet **中。雖然您提供了一個鏈接，但如果它變得無效，那麼您的問題對於其他未來具有相同問題的SO用戶將沒有任何價值。請參閱[**我網站上的某些內容不起作用，我可以只粘貼一個鏈接**]（http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-犯規，工作可以-I-剛剛糊一個鏈接到它）。 –

這是可能沒有JS插件提到的，請參閱下面的回答 – kylecblyth

這隻適用於JavaScript而不適用於CSS。你需要像「砌體」（https://masonry.desandro.com/）。

來源

2017-08-16 09:52:47

你可以簡單地修復這與CSS只有你需要設置固定高度的圖像和添加屬性object-fit:cover現在圖像將是相同的高度。或者你需要不同高度的圖像，那麼你需要使用一些JS插件，像https://isotope.metafizzy.co/layout-modes/masonry.html

.wrapper-projekte .post img { 
    height: 260px; 
    object-fit: cover; 
    width: 100%; 
}

來源

2017-08-16 09:53:57

他希望圖像具有可變高度而不是拉伸以適合固定的一個 – kylecblyth

但是，這將設置所有圖像的通用高度，我希望圖像能夠有不同的高度 – JoSch

@JoSch然後你需要使用這個插件https://isotope.metafizzy.co/layout-modes/masonry.html –

您可以將內容分爲三米的div並使用最小寬度，使他們下降到單個列當窗口比〜850px更窄時。

這裏是我的意思的例子：

https://jsfiddle.net/g6a4vprb/2/

CSS如下：

.column { 
    width: 30%; 
    min-width: 270px; /* put this in a media query (shown in fiddle link above) */ 
    float: left; 
    margin: 0 1%; 
} 

.column img { 
    width: 100%; 
}

來源

2017-08-16 10:00:39 kylecblyth

html/css：網格圖像具有不同的高度 - 爲什麼圖像沒有正確包裝？

回答

相關問題