[html/css] 關於在Table中填滿圖片

html css table

tsungmin 2023-03-15 16:10:59 ‧ 1563 瀏覽

分享至

最近在練習Table的rowspan功能
我想嘗試將左半邊的某兩格合併，然後放入image，右邊兩格則是放一些文字，如下圖所示

但我無法讓圖片完全填滿格子，我用padding調到0之後底部還是有一點空白
下面是我寫在codepen的範例可以參考
https://codepen.io/zon-zong-min/pen/OJzEZzZ

麻煩各位大佬開導~ 謝謝

ccutmis iT邦高手 2 級 ‧ 2023-03-15 16:19:19 檢舉

try this :
.main_div_table img {
display:block; height: 300px; width: 400px;
}

or:

.td_img {
padding: 0px;font-size:0px;line-height:0px;
}

powerc iT邦研究生 5 級 ‧ 2023-03-15 16:47:02 檢舉

修改img的vertical-align

例如
img {
vertical-align: bottom;
}

tsungmin iT邦新手 4 級 ‧ 2023-03-16 23:07:12 檢舉

了解~ 感謝兩位

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

小哈片刻

iT邦研究生 4 級 ‧ 2023-03-15 22:42:35

最佳解答

這個是常見的問題，先講解決方法。

方法一、將img變成block

.main_div_table img {
    ...
    display: block;
}

方法二、將img的垂直對齊改成baseline以外的值

.main_div_table img {
    ...
    vertical-align: top;
}

接著講這個問題發生的原因。
因為img預設的vertical-align是baseline，再加上預設的display為inline-block，所以在顯示時會把它視為一段文字的一部分。
baseline在英文字裏是將字母分成三段的第二條線(如同下圖的深藍線)，因此圖的底端若是對齊那條線，那麼再更底下就會有一小截預留的空白，用來放y、g、p等字母的下半身。

解決方法就是讓img不是inline, 讓它不需要和文字對齊，或是讓它不要朝baseline對齊。