手机端响应式布局时,图片设置width=100%后,还有设置display:block才能实现自适应
生活随笔
收集整理的這篇文章主要介紹了
手机端响应式布局时,图片设置width=100%后,还有设置display:block才能实现自适应
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
img標簽是行內元素,行內元素是沒有width和height屬性,自然無法設置。需要設置成block,才可以設置。但是img標簽比較特殊,跟input又叫替換元素,自身就有width和height,所有只是為了設置width和height,改變display為block是沒有必要的。畫蛇添足而已
解決圖片常見問題---底部多余留白
display:block;
因為img標簽默認是行內元素(好像是這么說的),也就是inline,行內元素設置寬度是無效的,display: block; 之后為塊級元素。設置了width才有效
為何不用flex布局呢?
設置img為:
解決圖片常見問題---底部多余留白
display:block;
因為img標簽默認是行內元素(好像是這么說的),也就是inline,行內元素設置寬度是無效的,display: block; 之后為塊級元素。設置了width才有效
為何不用flex布局呢?
設置img為:
總結
以上是生活随笔為你收集整理的手机端响应式布局时,图片设置width=100%后,还有设置display:block才能实现自适应的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: oppo手机怎么隐藏应用有几种方法(op
- 下一篇: 华为手机哪一款最好(华为手机性价比top