根据图片宽高比实现高度自适应

需求

前端开发中有很多场景是文字内容在图片上的，这种场景一般我们都会用背景图片来做。但是背景图片需要一个height属性来将div撑开才可以显示出来。

通常我们会使用设计稿给的高度，或者自己将内容高度做一个加和来实现高度。然后对内部背景图片的尺寸background-size设置相对应的100% 100%、contain、cover等来满足自己的要求。

可是如果让你把这个顺序反过来，先给你背景图片但是高度是不固定的。高度根据图片宽度与屏幕宽度自适应，然后将内容放上去，你会怎么做？？？

场景

很多人觉得没有这样的场景，但事实上这样的场景还是比较多见的。比较常见的就是在native内嵌h5。native需要提供一张背景图片，而图片上的内容由h5完成。

native不知道这个图片的高度，他无法根据屏幕来适配给h5留的这个webview窗口的高度是多大。因此需要h5写一个根据不同屏幕宽度，高度跟随背景图片高度不断自适应的div来配合。

解决办法

img

根据图片宽高比来定高，最常见的就是直接使用img标签。这样屏幕宽度一定，图片的高度自己会自适应。然后用图片高度撑开div高度，将内容定位到这个div上。

这样虽然可以解决，但是有两个问题：

• 图片因为各种原因加载失败，就会出现图裂开的标记（Android与ios还表现不一致），进而定位到上面的内容会崩掉；
• 图片是一种需要加载的html元素，与div有区别。在未加载成功时不具备宽高。所以在页面显示中会出现突然一闪，然后一堆内容出来的场景。

图片裂开的解决方案

防止图片裂开的解决方案一种是对图片加载失败在回调方法里进行单独处理。

另一种就是改为背景图片，这样即使加载失败最多就是背景加载不出来而不会导致页面内容崩掉。

但是使用背景图片的问题就是高度无法确定。

利用padding设置高度

既需要图片根据屏幕宽度自适应、高度不固定，又需要图片作为背景图片。我们可以使用padding来解决这个问题。 因为padding有一个重要属性：

它的百分比是以他自身宽度为基准来设置的。

例如一个div的宽度为100px，我们设置padding-left为20%，实际上这个值是20px。同理设置padding-top为20%，这个值也是20%。通过这个属性我们就可以很巧妙的在css中动态拿到屏幕的宽度，并根据屏幕宽度来动态设置自己想要的高度。也就是所谓的根据图片宽高比实现高度自适应。

具体代码就不贴了，了解原理其实很简单。

• div高度设置为0；
• padding-bottom根据图片宽高比换算为对应百分比；
• 将内容定位到div上。

这样就解决了上面img所带来的两个问题。

这种做法也有他的不足之处：

• 无法对图片出错单独处理
• 更换图片后，高度需要重新设置

所以，根据实际情况和需求自行取舍。