使用CSS調整圖像的大小以適合方形

我有一組圖像，我將其調整爲設置的寬度，並允許自動設置高度。所有圖像都是正方形，或者比它們高，而且我希望對非方形圖像具有「信箱/寬屏」效果。有沒有辦法讓圖像垂直居中使用CSS的方形邊框內？使用CSS調整圖像的大小以適合方形

編輯添加一個非常粗糙和準備好的佈局。我也喜歡圖像的包裝，所以如果屏幕放大，可能只有兩個連續。

enter image description here

來源

2014-04-02 Jamie Bull

將它設置爲元素的背景圖像如何？ – j08691

你的意思是這樣的：http://jsbin.com/xibug/1/edit？ –

你可以提供你想要達到的模板或屏幕截圖。我無法理解你希望如何安排多個圖像在容器格 –

如果你能控制實際的圖像，這意味着你自己擁有它們，那麼最好的解決辦法就是將它們裁剪成完美的方形。因此，如果這些圖像是100像素X 100像素，你可以添加一些給它的邊緣，那麼你的CSS邊界之間的一些間距，例如：

div .image { 
    background-image: url("images/blah.jpg"); 
    background-repeat: no-repeat; 
    background-color: black; 
    border: 3px solid black; 
    padding: 10px; 
}

我認爲這將完成你想要什麼。 :)

注意：如果您自己沒有圖像，我會使用CSS屬性：max-height或max-width。這將保持圖像至少成比例。不要同時使用這兩者。

來源

2014-04-02 13:41:50 jaminroe

嘗試所有圖像vertical-align:middle;。

來源

2014-04-02 02:54:03

*「然後嘗試vertical-align：middle;在包含所有圖像的div上。」*爲什麼不'vertical-align：middle;'on圖像？ –

，因爲他有很多圖像，所以我覺得整個div會更好 –

你可以展示一下如何用CSS'vertical-align：middle;'影響內部圖像的'DIV'？ –

u可以使用background-image代替<img>容器內<div>並設置CSS爲

background:url("img_url") no-repeat ; 
background-size:100% auto; 
background-position:center center; 
background-color:black;

這將給寬屏效果的景觀圖像

希望這有助於！

來源

2014-04-02 02:55:41

*「'我有一個圖像集合'」* –

順便說一句。你可以把它全部放入一行。 –

@RokoC.Buljan可以提供您想要的模板或屏幕截圖。我無法理解你想要如何安排與多個圖像在容器div –

使用CSS調整圖像的大小以適合方形

回答

相關問題