锋言锋语

NferZhuang的自留地

使用img自动撑开高度

引言

在一个项目中有如下代码:

  <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默认高度是0
  • overflow: hidden;是没有意义的,正常情况下背景图片是不会超出div边界的
  • background设置了背景图片,为了不出现空白,使用cover参数来保证图像完全覆盖背景区域
  • margin-top: -1px;是一个”css trick”,主要是处理有些浏览器上下出现白边的问题

使用img标签

关于 CSS,img 是一个可替换元素。 — MDN

img元素的默认display值是inline,但是一般设置为blockMDN也是这么建议。

虽然设置img元素display: block;,但是其表现并不是完全按照块状元素,“可替换元素”有着自己的一套宽高的计算方式。默认情况下,图片是1:1的形式显示在页面上,并没有像div之类的块状元素一样自动铺满整个宽度。因此,为了防止图像宽度超出页面,一般需要再设置max-width: 100%;

img元素默认宽高比例是和图片保持一致的,即当你只设置了宽度时,页面会自动计算对应的高度并显示图片,单独设置高度时也是一样的计算;如果你同时设置了宽度和高度,则按照你设置的进行显示。

因此,在上面的业务中,我们完全可以使用img标签来简化。修改后的代码如下:

<img src="./bg.jpg">

img {
    display: block;
    width: 100%;
}

后记

因为元素的高度是由图片自动撑起来的,因此页面在加载的时候是不清楚需要预留多少空间的,只有当图片下载完成后,再根据宽高比例才能确定高度。

因此,如果已知图片高度的情况下,最好也能给出对应的高度设置。

文 / nfer
LEAVE A REPLY

loading