最近遇到这样一个问题,在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. postman 请求接口 Could not get any response

    前提: 今天用postman请求接口的时候,能请求到接口,但是打断点后发现方法里面要抛出异常就出现错误: 错误原因: 返回的 http 的 code不是3位的,如下我写成了四位 4002: <? ...

  2. Vuex的简单认识

    一. 什么是vuex? Vuex是一个专为了vue.js 应用程序开发的状态管理模式 二.为什么要用vuex? 构建一个大型单页面应用程序时,Vuex可以更好的帮我们的组件外部更好的统一管理状态 类似 ...

  3. 数据排序 sort

    排序命令: 常和管道进行协作的命令  -sort  (默认使用字符的第一个字符进行排序) -n  按数字排序 -r  反序排序 -o  结果 输出到文件 -t  分隔符 (sort -n -t &qu ...

  4. 【LOJ】#3123. 「CTS2019 | CTSC2019」重复

    LOJ3123 60pts 正难则反,熟练转成总方案数减掉每个片段都大于等于s的字典序的方案 按照一般的套路建出kmp上每个点加一个字符的转移边的图(注意这个图开始字母必须是nxt链中下一个相邻的字符 ...

  5. X-UA-Compatibles

    今天在看京东网页代码的时候,发现了X-UA-Compatibles 这个元信息属性,不是很清楚,百度了一下,做下记录 X-UA-Compatible 属性是 IE 浏览器在 IE8 版本开始提供的一个 ...

  6. 使用django连接数据库 对数据库 增删改查

    如果路由访问的时候出现 就把项目中的注释掉 登录功能 1 路由访问如果不加斜杠 会内部自动重定向加斜杠的路由 所有的静态文件(css,js,前端第三方类库)默认都放在static文件下 #静态文件配置 ...

  7. 安装calico

    安装docker:https://www.cnblogs.com/cjsblogs/p/8717304.html 安装etcd集群:https://www.cnblogs.com/cjsblogs/p ...

  8. unity 3D循环滚动效果

    https://blog.csdn.net/qinyuanpei/article/details/52765356 https://blog.csdn.net/chongzi_daima/articl ...

  9. 搭建自己的框架WedeNet(二)

    WedeNet2018.Infrastructure-基础设施层:结构如下: Tools结构如下: 考虑到系统可能会有多个数据上下文(暂时以两个为例),所以根据需要定义两个T4模板用来生成对应的ent ...

  10. centos7配置rsync+inotify数据实时共享

    关于centos7版本上面搭建rsync服务并且实现实时同步之前一直是在6版本上面搭建rsync服务,在7版本上面折腾了半天.此处总结下inotify下载地址:http://github.com/do ...