iT邦幫忙

0

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

  • 分享至 

  • xImage

最近在練習Table的rowspan功能
我想嘗試將左半邊的某兩格合併,然後放入image,右邊兩格則是放一些文字,如下圖所示
https://ithelp.ithome.com.tw/upload/images/20230315/20147232KU9p5qLtP6.png

但我無法讓圖片完全填滿格子,我用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 }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

10
小哈片刻
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對齊。

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

感謝您!

我要發表回答

立即登入回答