適合圖片到表格單元格[純HTML]

我如何適合表格td單元格的圖像？ [Pure HTML]適合圖片到表格單元格[純HTML]

我已經嘗試了下面的代碼，以適應表格td中的圖像。

HTML代碼是在這裏：

<table border="1" bordercolor="#aaa" cellspacing="0" cellpadding="0"> 
<tr> 
    <td><img width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" /></td> 
</tr> 
</table>

正如你可以在下面的截圖和JsFiddle DEMO看到，圖像不適合td細胞。

射擊：

enter image description here

我到底做錯了什麼？

任何建議都會很棒。

來源

2013-06-30 Hamed Kamrava

'img {display：block; }' –

@MattWhipple。我說純HTML ... –

純HTML不應該做造型。它在90年代以後不會被視爲純粹的。 –

聯內容留出空間，底部爲下降字符（J，Y，Q）：

https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps

有一對夫婦的修復：

使用display: block;

<img style="display:block;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />

或使用vertical-align: bottom;

<img style="vertical-align: bottom;" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />

來源

2013-06-30 18:03:44 LouD

這裏有一個小提琴的例子：http://jsfiddle.net/sj9YE/ – LouD

使用您的開發人員的工具，並檢查tr，td或img是否有任何填充或邊距。

來源

2013-06-30 17:45:07 adamse

謝謝，但你能解釋更多嗎？我很困惑 –

使用例如Chrome的開發工具，您可以右鍵單擊一個元素，並檢查是否有任何邊距填充在圖像封閉的元素。 – adamse

這是所有關於display: block :)

更新：

好了，所以你有表，TR和TD標籤：

<table> 
    <tr> 
    <td> 
     <!-- your image goes here --> 
    </td> 
    </tr> 
</table>

比方說你table或td（無論定義你的寬度）有屬性width: 360px;。現在，當您嘗試用實際圖像替換html註釋並將該圖像屬性設置爲width: 100%;時，應該完全填寫td單元格，您將面臨問題。

問題是您的表單元格（td）未正確填充圖像。你會注意到圖像沒有覆蓋的單元格底部的空間（它就像5px的填充）。

如何以最簡單的方式解決這個問題？

您正在使用表格嗎？你只需要在顯示屬性添加到您的圖像，使其具有以下：

img { 
    width: 100%; 
    display: block; 
}

來源

2014-11-25 15:10:35 miksiii

答案應該更精確，在我的opionion。 – lrineau

好的，所以如果你有一個表格和圖像存儲在TD單元格 - 你的TD有一些寬度，對吧？爲了適應該寬度，您必須將** display：block; **屬性分配給圖像。 – miksiii

實際上，它更符合StackOverflow的精神，你是編輯你的答案，而不是在評論中給出答案的精確度。 :-) – lrineau

如果你想用純HTML的解決方案做

，你可以在表中刪除邊框，如果你想。 ..或者你可以添加ALIGN =「中心」屬性，你的img標籤是這樣的：

<img align="center" width="100%" height="100%" src="http://dummyimage.com/68x68/000/fff" />

看到小提琴：http://jsfiddle.net/Lk2Rh/27/

，但仍然能夠更好地與CSS處理這個問題，我建議你。

我希望這可以幫到你。

來源

2016-06-02 13:27:53 DikaDikz

只是downvote？沒有評論/解釋？ – DikaDikz

適合圖片到表格單元格[純HTML]

回答

相關問題