引言
在一个项目中有如下代码:
<div class="container"></div>
.container {
margin-top: -1px;
width: 100%;
height: 11.02rem;
background: url("./bg.jpg") no-repeat center/cover;
overflow: hidden;
}
代码说明如下:
width: 100%;
是没有意义的,div
默认是块状元素,默认宽度百分百height: 11.02rem;
,因为采用的是rem布局,指定了元素的高度,否则div
默认高度是0overflow: hidden;
是没有意义的,正常情况下背景图片是不会超出div
边界的background
设置了背景图片,为了不出现空白,使用cover
参数来保证图像完全覆盖背景区域margin-top: -1px;
是一个”css trick”,主要是处理有些浏览器上下出现白边的问题
使用img标签
关于 CSS,img 是一个可替换元素。 — MDN
img元素的默认display
值是inline
,但是一般设置为block
,MDN也是这么建议。
虽然设置img
元素display: block;
,但是其表现并不是完全按照块状元素,“可替换元素”有着自己的一套宽高的计算方式。默认情况下,图片是1:1的形式显示在页面上,并没有像div
之类的块状元素一样自动铺满整个宽度。因此,为了防止图像宽度超出页面,一般需要再设置max-width: 100%;
。
img
元素默认宽高比例是和图片保持一致的,即当你只设置了宽度时,页面会自动计算对应的高度并显示图片,单独设置高度时也是一样的计算;如果你同时设置了宽度和高度,则按照你设置的进行显示。
因此,在上面的业务中,我们完全可以使用img
标签来简化。修改后的代码如下:
<img src="./bg.jpg">
img {
display: block;
width: 100%;
}
后记
因为元素的高度是由图片自动撑起来的,因此页面在加载的时候是不清楚需要预留多少空间的,只有当图片下载完成后,再根据宽高比例才能确定高度。
因此,如果已知图片高度的情况下,最好也能给出对应的高度设置。