遇上这样的排版,手机的解象度都不同,假如只用CSS3根本就做不出这样的排版:因此要用Jquery。

1. HTML

<div class="postImgCenterCrop" style="background-image: url('../../img/post/22894485_1073667679462365_6818287679867183224_n.jpg');" ></div>

2. CSS

.postImgCenterCrop {
display: inline-block;
width: 200px;
height: 200px;
background-position: center center;
background-size: cover;
}

3. Jquery

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

$(".postImgCenterCrop").width(width/2.1);
$(".postImgCenterCrop").height(width/2.1);

手机H5,用Jquery使图片自动填满两栏式排版的更多相关文章

  1. li 水平排列并自动填满 ul

    找了li 如何水平排列并自动填满 ul,同时 li 宽度平均?资料,里面有提到"请用js动态计算保证兼容性", 因为我想实现的是,水平滚动条,ul的上级div是固定的宽度1000p ...

  2. [WP8] ListBox的Item宽度自动填满

    [WP8] ListBox的Item宽度自动填满 范例下载 范例程序代码:点此下载 问题情景 开发WP8应用程序的时候,常常会需要使用ListBox作为容器来呈现各种数据集合.但是在ListBox呈现 ...

  3. ext:grid分页,列宽度自动填满grid宽度

    var cm = new Ext.grid.ColumnModel([{      header : '编号',      dataIndex : 'id'     }, {      header ...

  4. jQuery:图片自动变换

    <script type="text/javascript"> var aa=0; //设置变换时间为2s var timeChange=2000; //定义数组 va ...

  5. 两个DIV,左DIV宽度固定,右DIV自动填满剩余空间

    <style type="text/css"> #main{ width:98%; } #sidebar{ float:left; width:200px; backg ...

  6. css布局------左边宽度不定,右边宽度自动填满剩余空间

    HTML <div class="container"> <div class="left"></div> <div ...

  7. -webkit-box 高度自动填满

    <style> .box{ display: -webkit-box; -webkit-box-orient: vertical; height: 200px; background: # ...

  8. jquery 图片自动切换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. android自定义控件(8)-利用onMeasure测量使图片拉伸永不变形,解决屏幕适配问题

    使用ImageView会遇到的问题 在Android应用中,都少不了图片的显示,ImageView,轮播图,ViewPager等等,很多都是来显示图片的,很多时候,我们都希望图片能够在宽度上填充父窗体 ...

随机推荐

  1. Oracle SQL 异常处理

    今天学了异常处理 有预定义异常 与 用户自定义异常 还有 raise_application_error()函数raise_application_error() 只能把异常抛出而不能处理异常. 预定 ...

  2. css快速浏览

    meta <meta charset="utf-8" /> <meta name="keywords" content="key1, ...

  3. css选择器权重、样式继承、默认样式

    学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id   100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同 相同cs ...

  4. 用CSS编写多种常见的图形

    用CSS编写多种常见的图形 正方形与长方形 这个是最简单的,直接上代码 <!DOCTYPE html> <html> <head> <title>< ...

  5. border-radius 在 浏览器开发者工具移动端里是有效的,在真机是无效的。

    border-radius 在 浏览器开发者工具移动端里是有效的,在真机是无效的,怎么解决? 答案是 border-radius:20px !important 加上!important 就好了.

  6. 【转】美团 MySQL 数据实时同步到 Hive 的架构与实践

    文章转载自公众号  美团技术团队 , 作者 萌萌 背景 在数据仓库建模中,未经任何加工处理的原始业务层数据,我们称之为ODS(Operational Data Store)数据.在互联网企业中,常见的 ...

  7. Impala 笔记

    简介 Cloudera公司推出,提供对HDFS.Hbase数据的高性能.低延迟的交互式SQL查询功能. 基于Hive使用内存计算,兼顾数据仓库.具有实时.批处理.多并发等优点 是CDH平台首选的PB级 ...

  8. java基础源码 (4)--reflect包-AnnotatedElement接口

    接口:AnnotatedElement * Represents an annotated element of the program currently running in this * VM. ...

  9. Banner信息收集和美杜莎使用(9.26 第十二天)

    Banner信息收集 Banner信息,欢迎语,在banner信息中可以得到软件开发商.软件名称.版本.服务类型等信息,通过这些信息可以使用某些工具直接去使用相对应的exp去攻击 前提条件:需要和目标 ...

  10. 集合框架的详解,List(ArrayList,LinkedList,Vector),Set(HashSet,TreeSet)-(14)

    集合详解: /* Collection |--List:元素是有序的,元素可以重复.因为该集合体系有索引. |--ArrayList:底层的数据结构使用的是数组结构.特点:查询速度很快.但是增删稍慢. ...