html图片白边的解决方式
生活随笔
收集整理的這篇文章主要介紹了
html图片白边的解决方式
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
在日常的寫html頁面時(shí)，原生代碼經(jīng)常性的會(huì)引入圖片，我們也經(jīng)常性的會(huì)讓圖片寬度等于父盒子寬度的100%，高度自適應(yīng)，但是此時(shí)會(huì)出現(xiàn)一個(gè)問題，圖片下方總有撐開的一小部分，這里我將父盒子背景顏色改成黑色，以便觀察
修改前的代碼
此時(shí)只需要給圖片添加一個(gè)display: block; 屬性就會(huì)解決圖片的這個(gè)問題
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.box{width: 300px;background-color: black;}.box>img{width: 100%;}img{display: block;}</style> </head> <body> <div class="box"><img src="img.jpg"/></div> </body> </html>修改后的效果
總結(jié)
以上是生活随笔為你收集整理的html图片白边的解决方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 别说了，世界那么大我想去看看！（最短路径
- 下一篇： 图片与文字间出现间隙的原因与解决方案