web网站开发时,用的Chrome 浏览器进行调式,一切展示均正常,但在苹果手机浏览器中打开,图片变小了很多。
有人说,可以通过给img添加一个父级div,给父级div设置图片要展示的宽高,然后给img设置width为100%,高度auto。
html及css如下:
<div class="img-container">
<img src="xxx.png" />
//假定图片路径正常
</div>
.img-container{
width:100px;
height:100px;
}
.img-container img{
width:100%;
height:100%;
}
由于我这个图片是后台返回的富文本格式,前台没有办法给其中的图片添加父级,因此没有做尝试。
突然想到,浏览器可以通过mate标签做适配,看了一下,网站中确实没有添加这类mate,如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
添加之后,神奇的好了~
(如有不同方法或者建议,可留言哦~~)