H5图片高度自适应

H5图片高度自适应

问题描述：在img标签的设置style=“width:100%;height:auto !important”；在电脑端打开浏览器控制台选择手机模式调试，图片能根据宽度自动调整高度，能实现图片高度自适应的效果。但是使用真机调试时，手机端显示的图片高度未能自适应，高度拉伸严重。

原代码：

<div class="show-img1 flex jc-center pd-y-05">
   <img src="t3.png" style=“width:100%;height:auto;”>
</div>

网上有很多人说可以使用设置背景图片的方法或者是css3中的新属性为img设置bject-fit：cover/fill/contain 等。不过设置bject-fit属性我去尝试设置了，结果都失败了。

其实很简单，只要高度这里不应该是auto，改成100%就可以了。

修改后的代码：

<div class="show-img1 flex jc-center pd-y-05">
   <img src="t3.png" style=“width:100%;height:100%;”>
</div>

或者：
<div class="show-img1 flex jc-center pd-y-05">
   <img src="t3.png" width=“100%” height=“100%” >
</div>