Question

在HTML中浏览器兼容问题

本人现在写了一个网页，布局是用的百分比做的希望能够适应手机的分辨率。
但是现在遇到一个问题就是：我用DVI　缩放图片出现了兼容性的问题，
我设置图片的宽度按照div的宽度百分百显示。
现在有的浏览器就不能够完全显示，而且失真；
代码： <div class="icon"><img src="/beetl/images/appService/15.png"></div>
CSS: .icon{ width:25% ;height:auto;}

img{ width:100%; height:100%;}

求大神指点：谢谢

Answer 1

<div class="icon"><img src="/beetl/images/appService/15.png"></div>

<style>
img{ width:100%; height:100%;}

</style>
试试吧，头最好加上

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

追问

我的头已经加上了啊
这个不是就是适应手机
这个问题已经排除了

Answer 2

你这个肯定失真的，图片是固定大小的，你要做到100%那图片一定会被拉伸，失真是肯定的。你试试用大点的图，还有img的属性height不需要。

Answer 3

可以试试固定宽高,不过估计页面会被撑大...

追问

固定宽高还能缩放吗？