圖像不完全適合其容器

我想將圖像放入容器中，但由於某種原因，在圖像的末尾總是會有一小塊額外的空間：這裏是一個帶有測試的小提琴：http://codepen.io/anon/pen/sikAm。如果您查看右欄中的最後一個，則不會出現白色，因爲容器隱藏了溢出。這讓我覺得問題是因爲圖像而發生的，而不是因爲容器。所以容器的尺寸變得很白，因爲圖像「推」了一個額外的空間。然而，圖像的尺寸是正確的，它沒有餘量，可以在底部添加這一點，所以我可能會在錯誤的軌道上完全：圖像不完全適合其容器

img { 
    border: 0; 
    width: auto; 
    max-width: 100%; 
    height: auto; 
}

我不知道該怎麼辦這個問題。什麼會導致空白？我錯過了什麼？

來源

2014-09-04 Gasim

問題是，默認情況下，圖像是內嵌元素，其vertical-align屬性默認爲baseline。這種對齊會在元素下面產生一些空間。

要解決它，你可以使用

display: block [Demo]。這樣元素將不再是內聯級別，因此vertical-align將不適用。
vertical-align: middle [Demo]。這解決了對齊問題。其他值也可能起作用。

來源

2014-09-04 17:05:35 Oriol

我覺得自己很愚蠢......所以'img'默認是內聯的，對不對？ – Gasim 2014-09-04 17:16:04

由於HTML代碼的換行符和空格不會導致空格。 – 2014-09-04 17:16:56

@ aniskhan001對，對不起。我很困惑，因爲換行符和空格可能會導致有問題的空間，但在這種情況下不會。固定。 – Oriol 2014-09-04 17:38:46

img s的顯示inline默認情況下，這對於文本的下一行自動創建的空間。

改爲將display設置爲block。它會使這些空間消失。

img { 
    display:block 
}

來源

2014-09-04 17:19:25

圖像不完全適合其容器

回答

相關問題