最近遇到这样一个问题,在HTML5手机页面中,直接给<img>标签设置宽高,即便图片路径正常,在IOS真机下也是无法显示的,而在安卓以及浏览器的模拟真机上都是正常显示的,这是为什么呢?
html:
<img src="xxxx.png" />
//假定图片路径正常
css:
img{
width:100px;
height:100px;
}
这样,图片在安卓以及模拟真机上是能够正常显示的,而在IOS手机下无法正常显示。
有人提供给我一个解决办法,给img标签加一个父级元素,给父级元素设置宽高,然后给img标签设置宽高100%,如下:
html:
<div class="img-container">
<img src="xxx.png" />
//假定图片路径正常
</div>
css:
.img-container{
width:100px;
height:100px;
}
.img-container img{
width:100%;
height:100%;
}
这样图片就能在IOS手机上正常显示了,不知还有更好的办法吗?