div元素下的圖片不能置頂解決辦法
- 2020 年 3 月 27 日
- 筆記
正常我們寫一個左右兩列，左側一列放置圖片的html，如下所示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ background-color: #fff; box-sizing: border-box; width: 100vw; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; height: 100vh; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; } .left{ width:50vw; height: 100vh; overflow: hidden; position: relative; } .imageBox{ width: 100%; height: auto; position: absolute; top: 0; } img{ width:100%; height:auto; display: block; } </style> </head> <body> <div class="container"> <div class="left"> <div class="imageBox"> <img src="http://img5.imgtn.bdimg.com/it/u=3025209343,1849399022&fm=26&gp=0.jpg" alt=""> <img src="http://img5.imgtn.bdimg.com/it/u=3025209343,1849399022&fm=26&gp=0.jpg" alt=""> <img src="http://img5.imgtn.bdimg.com/it/u=3025209343,1849399022&fm=26&gp=0.jpg" alt=""> </div> </div> </div> </body> </html>
正常寫個demo是可以打開且正常顯示的，但是在某些時候（可能是在配置了打包編譯等情況），發現圖片無論如何好像都在最底下我們看不到的位置展示，不能置頂，終於找到了原因。
解決辦法：
給imageBox 設置一個font-size:0px; 或者 設置 line-height:0；
產生問題的原因：
不設置font-size，會繼承父元素的font-size，我這裡繼承了我設置的html的font-size:200vw，則會產生這個問題;
由於html有默認行高，或者設置了默認字體大小。
注意：
這裡還有個img 5px縫隙的問題
解決辦法有三：
1、圖片父元素設置font-size:0;
2、圖片設置 display:block；
3、圖片設置 vertical-align:bottom;
4、圖片設置 margin-bottom:-5px;
