遇上这样的排版,手机的解象度都不同,假如只用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. 一对多关联按照一方的id查找信息的一个笛卡尔积问题

    mapper中,关联的一对多,正确的结果应该是按照一方的id查找,根据映射得到的是一个一方对象,对象里嵌套这list属性,但是结果却出来了多条,在sql中实验 一方中123456789只有一条数据 多 ...

  2. 【LeetCode】反转每对括号间的子串

    [问题]给出一个字符串 s(仅含有小写英文字母和括号). 请你按照从括号内到外的顺序,逐层反转每对匹配括号中的字符串,并返回最终的结果. 注意,您的结果中 不应 包含任何括号. 示例 : 输入:s = ...

  3. Django 模板渲染

    模板语言 {{ 变量 }} {% 逻辑 %} {{ 变量 }} {{ 变量 }}中的点号 用于取出字典/列表等类型数据的值 {{ list.2 }} 获取列表list中索引为2的值 {{ dict.n ...

  4. PHP-文件目录操作

       使用递归遍历指定文件目录及其子目录下的所有文件 思路: 1.打开目录: 2.遍历目录,判断是否还是目录.是目录则返回第1步,不是目录进入第三步: 3.把文件名显示出来 使用到的文件目录操作函数: ...

  5. Swift 协议protocol

    // associatedtype 关键字 用来声明一个类型的占位符作为协议定义的一部分 protocol LXFViewModelType { associatedtype Input associ ...

  6. HDU 2586 LCA-Tarjan

    还是LCA-tarjan算法,跟POJ 1330做法基本类似,只是这个题目要求输出两个点的最短距离,其实利用LCA的性质,就是 两个点分别到最近公共祖先的距离之和 一开始本来想用并查集把路径长度给找出 ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-facetime-video

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. Python MySQL 教程

    章节 Python MySQL 入门 Python MySQL 创建数据库 Python MySQL 创建表 Python MySQL 插入表 Python MySQL Select Python M ...

  9. Python PIP包管理器

    版权所有,未经许可,禁止转载 章节 Python 介绍 Python 开发环境搭建 Python 语法 Python 变量 Python 数值类型 Python 类型转换 Python 字符串(Str ...

  10. C# Stream篇(七) -- NetworkStream

    NetworkStream 目录: NetworkStream的作用 简单介绍下TCP/IP 协议和相关层次 简单说明下 TCP和UDP的区别 简单介绍下套接字(Socket)的概念 简单介绍下Tcp ...