使用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，但是一般设置为block，MDN也是这么建议。

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

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

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

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

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

后记

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

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