移动端H5开发图片在安卓显示正常在IOS上显示不出来的问题

h5开发或者h5混合APP开发中，图片在安卓正常小时，但是在IOS中却显示不出来，经过实践，发现在img元素上要包裹一个父元素，比如div、figure标签，在父元素里设置图片的宽高，然后在img元素里通过设置宽高为100%继承父元素的宽高。解决方法：<figure class="parent"><img src="./demo.png" alt="" class="child"

I_recluse

3431人浏览 · 2021-07-14 11:29:21

I_recluse · 2021-07-14 11:29:21 发布

h5开发或者h5混合APP开发中，图片在安卓正常显示，但是在IOS中却显示不出来，经过实践，发现在img元素上要包裹一个父元素，比如div、figure标签，在父元素里设置图片的宽高，然后在img元素里通过设置宽高为100%继承父元素的宽高。

解决方法：

<figure class="parent">
  <img src="./demo.png" alt="" class="child" />
</figure>

.parent {
    width: 100px;
    height: 100px;
}
.child {
    width: 100%;
    height: 100%;
}