遇上这样的排版,手机的解象度都不同,假如只用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. 安装npm install时,长时间停留在fetchMetadata: sill 解决方法——换npm的源

    安装npm install时,长时间停留在fetchMetadata: sill mapToRegistry uri http://registry.npmjs.org/whatwg-fetch处, ...

  2. php.basic.functions

    array_unshift call_user_func_array闭包 下面是学院的代码 class Container { protected $binds; protected $instanc ...

  3. Hadoop完全高可用集群安装

    架构图(HA模型没有SNN节点) 用vm规划了8台机器,用到了7台,SNN节点没用   NN DN SN ZKFC ZK JNN RM NM node1 *     *         node2 * ...

  4. 一百零三、SAP中常量的定义CONSTANTS

    一.代码如下 二.运行效果如下

  5. 064-PHP函数中局部变量在函数外不可使用

    <?php function print_num(){ //定义函数 $x=6; //在函数中定义变量 } print_num(); //调用函数 echo $x; ?>

  6. 编译Linux

    下载内核源文件 https://git.kernel.org/pub/scm/linux/kernel/git/stable/linux-stable.git/ 生成.config配置文件 make ...

  7. APIO 2010 特别行动队 斜率优化DP

    Description 你有一支由 n 名预备役士兵组成的部队,士兵从 1 到 n 编号,要将他们拆分 成若干特别行动队调入战场.出于默契的考虑,同一支特别行动队中队员的编号 应该连续,即为形如 (i ...

  8. HDU 5464:Clarke and problem

    Clarke and problem  Accepts: 130  Submissions: 781  Time Limit: 2000/1000 MS (Java/Others)  Memory L ...

  9. Day2-T1

    原题目 Describe:贪心,左边和右边中选字典序小的 code: #include<bits/stdc++.h> using namespace std; int n,step,hea ...

  10. 文献阅读报告 - Social GAN: Socially Acceptable Trajectories with Generative Adversarial Networks

    paper:Gupta A , Johnson J , Fei-Fei L , et al. Social GAN: Socially Acceptable Trajectories with Gen ...