遇上这样的排版,手机的解象度都不同,假如只用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. 一百一十三、SAP的SCAT录屏操作,类似按键精灵可用于批量修改数据

    一.输入事务代码SCAT,输入Z开头的程序名,点击左上角的新建图标 二.输入标题和模块名 三.保存为本地对象 四.包属性修改为CATT,然后保存 五.可以看到我们新建的一条内容,点击小铅笔修改 六.点 ...

  2. 计算方法执行完的耗时 c#

    Stopwatch watch = Stopwatch.StartNew(); //要执行的方法 test(); watch.Stop(); Console.WriteLine(string.Form ...

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

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

  4. Web基础之Maven

    Web基础之Maven Maven是一个优秀的项目管理工具,可以很轻松的管理项目. POM和LifeCycle POM:Project Object Model.也就是项目模型,简单来说就是对项目进行 ...

  5. SpringBoot通过ApplicationArguments获取args

    如果你需要获取通过SpringApplication.run(…​)传输过来的arguments,可以直接注入一个ApplicationArguments即可实现,如下面这个例子: @Service ...

  6. 现在购买5G“商用手机”值不值呢?是花冤枉钱还是提前享受?

    刚刚发布的"安卓最强机皇"华为Mate 20系列依然没有支持5G,只是在收割最后的4G红利.相比之下,即将发布的小米MIX 3,看起来亮点还是颇多的.除了滑盖摄像头.屏占比更高的全 ...

  7. CSS - 实现荧光边框

    1,index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  8. java多线程并发(二)--线程的生命周期及方法详解

    上篇随笔介绍了线程的相关基础知识以及新启线程的几种方法,本片将继续介绍线程的生命周期及方法详解. 一.线程的生命周期 在Thread代码中,线程的状态被分为6种 public enum State { ...

  9. JDK1.8 HashMap学习

    1:源码分析 1.1:构造方法 public HashMap(int initialCapacity, float loadFactor) { ) throw new IllegalArgumentE ...

  10. spring boot集成mybatis(2) - 使用pagehelper实现分页

    Spring Boot 集成教程 Spring Boot 介绍 Spring Boot 开发环境搭建(Eclipse) Spring Boot Hello World (restful接口)例子 sp ...