最近遇到这样一个问题,在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手机上正常显示了,不知还有更好的办法吗?

IOS下图片不能显示问题的解决办法的更多相关文章

  1. [移动端] IOS下border-image不起作用的解决办法

    上周五突然接到现场的一个需求,做一个移动端的劳模展示页面.现场美工把原型图发了过来.这个样子的: 说实在的很想吐槽一下我们美工的审美哈,不过这不是重点. 因为边框是需要特殊花纹的所以打算用border ...

  2. 苹果IOS下text-shadow与box-shadow失效的解决办法

    加入以下样式,可以解决苹果IOS下text-shadow与box-shadow失效的问题 -webkit-appearance: none

  3. sublime text 按下Ctrl + B 显示空白的解决办法

    环境:windows xp , sublime text 2 条件:环境变量也已经设置好,可是无论怎么编译都是空白,如图: 于是鄙人百度之,发现不少网友都有这样的问题,但是网上给出的的解决方案千篇一律 ...

  4. IE6 IE7下文字显示竖排的解决办法

    IE下文字显示竖排的解决办法: white-space:nowrap;

  5. SSRS (SQL Server Report Service) 在IE9, IE10下显示不全的解决办法

    原文:SSRS (SQL Server Report Service) 在IE9, IE10下显示不全的解决办法 在做项目的过程中遇到SSRS与IE9, IE10不兼容的情况,具体表现为报表页面在IE ...

  6. HTML中的select下拉框内容显示不全的解决办法

    HTML中的select下拉框内容显示不全的解决办法 今天,我遇到这样一个问题:查询栏中的下拉框中的内容过长,导致部分被覆盖了. 查询了一些资料,有的说用函数控制,有的说用事件控制,有的看不懂,有的实 ...

  7. ios访问web页面<div>点击事件不起效果,以及alert()显示url的解决办法

    ios访问web页面<div>点击不起效果,在其div上添加style=”cursor:pointer:“ jquery web页面动态append()事件调用方法:$(document) ...

  8. SecureCRT中某些命令提示符下按Backspace显示^H的解决方法

    SecureCRT中某些命令提示符下按Backspace显示^H的解决方法 安装了Apache Derby数据库服务器之后,使用ij客户端去连接derby服务端,可是在ij中输入命令的时候,每当输入错 ...

  9. MySQL 5.7 Command Line Client输入密码后闪退和windows下mysql忘记root密码的解决办法

    MySQL 5.7 Command Line Client输入密码后闪退的问题: 问题分析: 1.查看mysql command line client默认执行的一些参数.方法:开始->所有程序 ...

随机推荐

  1. Go 采用 time.After 实现超时控制

    场景: 假设业务中需调用服务接口A,要求超时时间为5秒,那么如何优雅.简洁的实现呢? 我们可以采用select+time.After的方式,十分简单适用的实现. time.After()表示time. ...

  2. 19牛客暑期多校 round1 A 有关笛卡尔树的结论

    题目传送门//res tp nowcoder 分析 定理:B1~B2当且仅当B1与B2有同构的笛卡尔树. (B₁~B₂ iff B₁ and B₂ have isomorphic Cartesian ...

  3. PAT A1011 World Cup Betting(20)

    AC代码 #include <cstdio> #include <algorithm> const int max_n = 3; using namespace std; /* ...

  4. vs 2017创建类时的默认模板修改

    思路:找到vs 2017安装目录---->找到模板文件---->修改 一般安装目录: C:\Program Files (x86)\Microsoft Visual Studio\2017 ...

  5. WPF 遍历资源字典中的控件

    object obItem=this.FindResource("canvasdt"); if (obItem is System.Windows.DataTemplate) { ...

  6. vuex中的this.$store.commit

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多 ...

  7. day8 socket

    代码: 例子1:socket tcp 通讯 server端 import socketserver = socket.socket()ip_port = ("127.0.0.1", ...

  8. 第十章、logging模块

    目录 第十章.logging模块 一.logging模块及日志框架 第十章.logging模块 一.logging模块及日志框架 导入方式 import logging 作用 写日志 模块功能 # V ...

  9. jsonp的原理介绍及Promise封装

    什么叫jsonp? jsonp是json with padding(填充式json或参数式json)的简写,是通过ajax请求跨域接口,获取数据的新实现方式 jsonp的实现原理: 动态创建scrip ...

  10. 《python解释器源码剖析》第7章--python中的set对象

    7.0 序 集合和字典一样,都是性能非常高效的数据结构,性能高效的原因就在于底层使用了哈希表.因此集合和字典的原理本质上是一样的,都是把值映射成索引,通过索引去查找. 7.1 PySetObject ...