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

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

类似这样。

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

最后用乐另外一种

  1. <div class="headimg">
  2. <div class="headimgKs">
  3. </div>
  4. </div>
  5. <style>
  6. .headimg {
  7. width: 100%;
  8. height: 0;
  9. position: relative;
  10. padding-bottom: 40%;
  11. }
  12. .headimgKs {
  13. position: absolute;
  14. top: 0;
  15. left: 0;
  16. width: 100%;
  17. height: 100%;
  18. background: url(1.jpg) no-repeat;
  19. background-size: 100% 100%;
  20. -moz-background-size: 100% 100%;
  21. -webkit-background-size: 100% 100%;
  22. -o-background-size: 100% 100%;
  23. }
  24. </style>

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

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

  1. <div class="guanggaoBanner">
  2. <i>暂无图片</i>
  3. <div class="right-img">
  4. </div>
  5. </div>
  6. <style>
  7. .guanggaoBanner {
  8. position: relative;
  9. width: 94%;
  10. height: 0;
  11. padding-bottom: 50%;
  12. background-color: #ddd;
  13. }
  14. .guanggaoBanner i {
  15. position: absolute;
  16. top: 45%;
  17. left:0;
  18. text-align: center;
  19. width: 100%;
  20. color: #000;
  21. }
  22. .right-img {
  23. position: absolute;
  24. top: 0;
  25. left: 0;
  26. width: 100%;
  27. height: 100%;
  28. background: url(1.jpg);
  29. background-size: 100% 100%;
  30. -webkit-background-size: 100% 100%;
  31. -moz-background-size: 100% 100%;
  32. }
  33. </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. Maven详解【面试+工作】 各种安装 没用

    1 Maven介绍1.1 项目开发中遇到的问题 1.都是同样的代码,为什么在我的机器上可以编译执行,而在他的机器上就不行? 2.为什么在我的机器上可以正常打包,而配置管理员却打不出来? 3.项目组加入 ...

  2. DataTable数据分页

    using System;using System.Collections.Generic;using System.Data;using System.Linq;using System.Refle ...

  3. 下拉菜单--JavaScript触发方法

    1. $(function(){ $(".dropdown-toggle").one("click",function(){ $(this).dropdown( ...

  4. MP3 Lame 转换 参数 设置(转)

    我们在对音频格式的转换中,打交道最多的就是MP3了.如果你能彻底玩转MP3,那么对你的音频创作和对其他音频格式的掌握会有很大的帮助.下面我们给大家介绍MP3制作软件:LAME 要制作出高音质的MP3靠 ...

  5. python操作mysql数据库系列-安装MySQLdb

    一波三折,先是pip命令出现问题,然后各种方法尝试解决.然后是直接使用pip2命令安装报错,mysql-python库安装再次出现问题.于是使用国内镜像的方式去安装:pip2 install MySQ ...

  6. ContextLoaderListener和Spring MVC中的DispatcherServlet学习 随手记

    Servlet上下文关系 DispatcherServlet的上下文是通过配置servlet的contextConfigLocation来加载的,默认实现是XmlWebApplicationConte ...

  7. 【转载】python计算文件的行数和读取某一行内容的实现方法

    一.计算文件的行数 最简单的办法是把文件读入一个大的列表中,然后统计列表的长度.如果文件的路径是以参数的形式filepath传递的,那么只用一行代码就可以完成我们的需求了: count = len(o ...

  8. [Lua快速了解一下]Lua的Table

    Lua中的Table其实就是一个Key Value的structure haoel = {name=, handsome=True} -table的CRUD操作 haoel.website=" ...

  9. POJ 3660 Cow Contest(传递闭包)

    N (1 ≤ N ≤ 100) cows, conveniently numbered 1..N, are participating in a programming contest. As we ...

  10. python变量和简单的数据类型

    1.运行hello_world.py时发生的情况 运行hello_world.py时,Python都做了些什么呢?实际上,即便是运行简单的程序,Python所做的工作也相当多: #!/usr/bin/ ...