第一次写博文,心情有点小小的激动~~~~~

刚开始做移动端项目的时候遇到了一些优化的问题,比如,打开网页在2g或者3g的情况下加载网页,刚开始渲染的时候,遇到图片文件未请求,图片的高度会为0,当然,如果你给定图片的高度的时候就不会有这样的情况,这样会出现渲染过程不平缓的情况。

类似这样。

之后查询了网上的一些相关资料,发现用rem可以实现宽度等比,但是项目已经基本完成,所以这个办法也是走不通了。。。@@

最后用乐另外一种

<div class="headimg">
<div class="headimgKs">
</div>
</div>
<style>
.headimg {
width: 100%;
height: 0;
position: relative;
padding-bottom: 40%;
}
.headimgKs {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(1.jpg) no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
}
</style>

试过之后发现效果极佳,原理是利用背景图和绝对定位和padding-bottom属性的百分比值是根据容器宽度进行计算,也就是说容器宽度为320px,padding-bottom:40%就是128px,这样就实现了等比显示图片。

后期又在此基础上实现了一些优化,比如没有图片时的提醒

<div class="guanggaoBanner">
<i>暂无图片</i>
<div class="right-img">
</div>
</div>
<style>
.guanggaoBanner {
position: relative;
width: 94%;
height: 0;
padding-bottom: 50%;
background-color: #ddd;
}
.guanggaoBanner i {
position: absolute;
top: 45%;
left:0;
text-align: center;
width: 100%;
color: #000;
}
.right-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(1.jpg);
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
</style>

  或者是没有图片的时候给定一张默认图,在第一个例子的基础上把背景图改为 background: url(1.jpg),url('默认图') ;

写得不好的地方还请大家不吝赐教哈,3Q

css 移动端图片等比显示处理的更多相关文章

  1. css设置背景图片,ie显示不了

    本来是想给导航栏<div class="nav"></div>添加背景图片的,设置css样式如下: .nav{background:url("ht ...

  2. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  3. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  4. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  5. 如何使用css来让图片居中不变形 微信小程序和web端适用

    图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...

  6. web端实现图片放大切换显示预览

    项目中会遇到多张图片点击放大显示原图,并且能够左右滑动切换显示图片的需求,这种效果主要通过js来实现,下面我介绍的主要是借助swiper.js来实现这个完整的功能, 点击“查看协议” => 图片 ...

  7. 转载css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

    转载  原文:http://www.divcss5.com/wenji/w732.shtml 原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形. 二.使用布局技术   -    ...

  8. 纯原生js移动端图片压缩上传插件

    前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...

  9. HTML5浏览器端图片预览&生成Base64

    本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...

随机推荐

  1. 美化input type=range标签滑动样式(带渐变效果)

    input原来的样式就不在此赘述了: 下面看一下实际项目中用到的input输入框,同步绑定输入数据,实现输入框双向绑定(实际项目中使用的是vue框架): html部分: <div class=& ...

  2. 实践作业4:Web测试实践(小组作业)每日任务记录2

    实践作业4:Web测试实践(小组作业)每日任务记录2 会议时间:2017年12月22日 会议地点:东九教学楼自习区 主  持  人:王晨懿 参会人员:王晨懿.余晨晨.郑锦波.杨潇.侯欢.汪元 记  录 ...

  3. win7 iis7 ftp配置

    1.安装ftp服务器 开始菜单找到控制面板>在左侧找到打开或关闭windows功能点击 弹出如下对话框, 在弹出的对话框中找到Internet信息服务,如下 然后如上图所示,选中ftp服务器复选 ...

  4. [转][译] 存储引擎原理:LSM

    原译文地址:http://www.tuicool.com/articles/qqQV7za http://www.zhihu.com/question/19887265 http://blog.csd ...

  5. 获取cpu频率的代码

    taskset是linux自带的一个命令,可用来将进程绑定到指定CPU 相关的函数有: sched_setaffinity, CPU_CLR, CPU_ISSET, CPU_SET, CPU_ZERO ...

  6. js基础巩固练习

    ---恢复内容开始--- 今天讲了js的基础知识 js的组成3部分1 ECMAscript  核心  2 DOM 文本对象模型   3BOM  浏览器模型 js 的引入方式三种 1 在body里作为标 ...

  7. webstorm的debug模式

    F7 在 Debug 模式下,进入下一步,如果当前行断点是一个方法,则进入当前方法体内, 如果该方法体还有方法,则不会进入该内嵌的方法中 * F8 在 Debug 模式下,进入下一步,如果当前行断点是 ...

  8. sql 的REPLACE

    REPLACE 用第三个表达式替换第一个字符串表达式中出现的所有第二个给定字符串表达式. 语法 REPLACE ( 'string_expression1' , 'string_expression2 ...

  9. [raspberry p3] [suse] 安装maven

    [raspberry p3] [suse] 安装maven 配置package repositroy, 添加devel:tools:building vim /etc/zypp/repos.d/ope ...

  10. How to:Aborting a long running task in TPL

    http://social.msdn.microsoft.com/Forums/vstudio/en-US/d0bcb415-fb1e-42e4-90f8-c43a088537fb/aborting- ...