css 移动端图片等比显示处理
第一次写博文,心情有点小小的激动~~~~~
刚开始做移动端项目的时候遇到了一些优化的问题,比如,打开网页在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 移动端图片等比显示处理的更多相关文章
- css设置背景图片,ie显示不了
本来是想给导航栏<div class="nav"></div>添加背景图片的,设置css样式如下: .nav{background:url("ht ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- 如何利用CSS代码使图片和文字在同一行显示且对齐
对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
- 如何使用css来让图片居中不变形 微信小程序和web端适用
图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...
- web端实现图片放大切换显示预览
项目中会遇到多张图片点击放大显示原图,并且能够左右滑动切换显示图片的需求,这种效果主要通过js来实现,下面我介绍的主要是借助swiper.js来实现这个完整的功能, 点击“查看协议” => 图片 ...
- 转载css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
转载 原文:http://www.divcss5.com/wenji/w732.shtml 原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形. 二.使用布局技术 - ...
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- HTML5浏览器端图片预览&生成Base64
本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...
随机推荐
- Maven详解【面试+工作】 各种安装 没用
1 Maven介绍1.1 项目开发中遇到的问题 1.都是同样的代码,为什么在我的机器上可以编译执行,而在他的机器上就不行? 2.为什么在我的机器上可以正常打包,而配置管理员却打不出来? 3.项目组加入 ...
- DataTable数据分页
using System;using System.Collections.Generic;using System.Data;using System.Linq;using System.Refle ...
- 下拉菜单--JavaScript触发方法
1. $(function(){ $(".dropdown-toggle").one("click",function(){ $(this).dropdown( ...
- MP3 Lame 转换 参数 设置(转)
我们在对音频格式的转换中,打交道最多的就是MP3了.如果你能彻底玩转MP3,那么对你的音频创作和对其他音频格式的掌握会有很大的帮助.下面我们给大家介绍MP3制作软件:LAME 要制作出高音质的MP3靠 ...
- python操作mysql数据库系列-安装MySQLdb
一波三折,先是pip命令出现问题,然后各种方法尝试解决.然后是直接使用pip2命令安装报错,mysql-python库安装再次出现问题.于是使用国内镜像的方式去安装:pip2 install MySQ ...
- ContextLoaderListener和Spring MVC中的DispatcherServlet学习 随手记
Servlet上下文关系 DispatcherServlet的上下文是通过配置servlet的contextConfigLocation来加载的,默认实现是XmlWebApplicationConte ...
- 【转载】python计算文件的行数和读取某一行内容的实现方法
一.计算文件的行数 最简单的办法是把文件读入一个大的列表中,然后统计列表的长度.如果文件的路径是以参数的形式filepath传递的,那么只用一行代码就可以完成我们的需求了: count = len(o ...
- [Lua快速了解一下]Lua的Table
Lua中的Table其实就是一个Key Value的structure haoel = {name=, handsome=True} -table的CRUD操作 haoel.website=" ...
- POJ 3660 Cow Contest(传递闭包)
N (1 ≤ N ≤ 100) cows, conveniently numbered 1..N, are participating in a programming contest. As we ...
- python变量和简单的数据类型
1.运行hello_world.py时发生的情况 运行hello_world.py时,Python都做了些什么呢?实际上,即便是运行简单的程序,Python所做的工作也相当多: #!/usr/bin/ ...