鍍金池/ 問答/HTML/ img圖片撐不滿整個div

img圖片撐不滿整個div

<div class="content">
<img src="./1.jpg" alt="">
</div>
div元素不設(shè)置寬高，設(shè)一個背景顏色以便觀察，內(nèi)放img，但img圖片撐不滿整個div, (能觀察到圖片底部留有空隙)，如何解決？

回答
編輯回答
愿如初

img標(biāo)簽自帶有3px的空隙，有很多解決方法
第一種:設(shè)置img{font-size:0}
第二種:設(shè)置img{display:block}
第三種:設(shè)置img{vertical-align:top/middle};
推薦使用第二種。第三種也比較常用

2017年5月13日 14:05
編輯回答
怪痞

參考鏈接：https://segmentfault.com/q/10...
①display：block;
②給父級設(shè)置font-size：0；

2017年5月20日 02:53
編輯回答
念舊

可以給div設(shè)置css樣式overflow:hidden;溢出隱藏，然后圖片稍微調(diào)一下寬高

2017年6月10日 20:35
編輯回答
愛礙唉

圖片可能有問題，底部有白邊，用PS打開看看

2018年7月14日 09:25
編輯回答
硬扛

給img設(shè)置display:block 或者設(shè)置父元素font-size:0;line-height:0;（設(shè)置任意一個都行），不要只曉得這樣設(shè)置.要知道這個空隙由于inline元素的高度是由內(nèi)容長度和line-height決定的

2017年12月13日 06:34
編輯回答
浪蕩不羈

給img設(shè)置display:block

2017年7月3日 00:48
編輯回答
硬扛

解決方法
1、設(shè)置父元素的font-size:0;
2、設(shè)置圖片的display:block;
3、設(shè)置圖片的vertical-align: top;

參考這個 img下幾像素空白產(chǎn)生原因

2018年9月8日 07:39
編輯回答
念初

設(shè)置img為塊元素，寬度100%，高度100%，邊框?yàn)?；就可以撐滿盒子了。

2017年3月14日 15:07