最近遇到这样一个问题,在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. freeRTOS学习8-22

    互斥量的优先级继承机制可以减少优先级翻转问题,通过将持有锁的任务的优先级提升到当前任务中优先级任务最高的任务. #define KEY1_EVENT (0x01 << 0) #define ...

  2. NLP 对抗方法整理

    NLP中对抗应用 1. 分词 , 可以用GAN来做,消除不同分词器的差异性 2. 风格迁移, 这个在图像中应用较多,在NLP中同样可行 3. 提高问答系统/阅读理解的性能. 4. 机器翻译应该也可以做 ...

  3. D3 GEO应用专题(一):绘制旋转的3D地球

    https://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all 雷达图 https://blog.csdn. ...

  4. Oooooooo AAAAE 【网络流最小点权覆盖】

    Description “Let the bass kick!O-oooooooooo AAAAE-A-A-I-A-U- JO-oooooooooooo AAE-O-A-A-U-U-A- E-eee- ...

  5. 记:SpringBoot项目莫名出现ClassNotFoundException

    最近某个开发环境的某个应用,隔三差五出现了某某页面找不到,网上百度找了些同类的问题都是说jstl包与默认tomcat里的包冲突,但都感觉和我的问题不是很搭配(因为相同框架的其他项目都可以正常允许) 报 ...

  6. python-文件常用操作

    文件内建函数和方法: open()——打开文件 read()——输入 readline()——输入一行 seek()——文件内移动 write()——输出 close()——关闭文件 练习:

  7. hdu 3473 区间条件极值 - 区间 差的绝对值 之和的最小

    题目传送门//res tp hdu 目的 对长度为n的区间,给定q个子区间,求一x,使得区间内所有元素与x的差的绝对值之和最小. 多测. n 1e5 q 1e5 ai [1,1e9] (i∈[1,n] ...

  8. LC 752 Open the Lock

    由于这个问题,涉及了很多知识,例如数据结构里面的哈希表,c++中的迭代器,因此,需要对于每一个疑惑逐一击破. 问题描述 You have a lock in front of you with 4 c ...

  9. PC端判断屏幕宽度到达手机宽度的时候,直接跳转手机页面

    <script> // //判断屏幕宽度到达手机宽度的时候,直接跳转手机页面 // window.addEventListener("resize", function ...

  10. 购物车以php原生cookie实现

    index.php //入口文件 <?php /** * @name index.php * @decs * @author 老猫 <18368091722@163.com> * U ...