遇上这样的排版,手机的解象度都不同,假如只用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. CentOS 6.8 32位 安装mysql8

    1.清理掉之前安装过的mysql rpm -qa | grep mysql mysql-libs-5.1.52-1.el6_0.1.x86_64 yum remove mysql-libs-5.1.5 ...

  2. Ctags命令

    ctags -R 生成目录下的tags文件 只生成php文件的 tags文件 ctags --langmap=php:.engine.inc.module.theme.php --php-kinds= ...

  3. Zookeeper 在 Kafka 中的作用

    https://www.jianshu.com/p/a036405f989c 待整理...

  4. 干货分享:如何搞定Essay Paragraph部分?

    想要写出一篇高质量的留学生作业,首先要从写好段落(paragraph)开始.那么今天就随小编一起来看看,如何写好Paragraph部分? 段落:在英文中我们俗称为paragraph,而一篇英文文章通常 ...

  5. springboot项目 线程消费队列注入报错误空指针

    背景: 在调用阿里云隐私保护有一个通话记录的回执消息是一个消费线程队列,这个还别人告诉我的,因为我根本没有看出来哪里是个线程了,然后我就把它当成普通的代码拿到返回值以后然后插入数据库 可是我这边该加的 ...

  6. Android-寒假学习-阶段总结(20集)-口算测试APP

    说在前面: 1.视频教程:https://www.bilibili.com/video/av60445113/?spm_id_from=333.788.videocard.0 2.老师的源码:http ...

  7. SpringBoot+SpringSecurity之多模块用户认证授权同步

    在之前的文章里介绍了SpringBoot和SpringSecurity如何继承.之后我们需要考虑另外一个问题:当前微服务化也已经是大型网站的趋势,当我们的项目采用微服务化架构时,往往会出现如下情况: ...

  8. Mongodb集群形式探究-一主一从一仲裁。

    主节点(primary)与从节点(secondary)和仲裁节点(arbiter)具有存储数据的两个成员的三个成员副本集具有:   ●一个主节点.   ●一个从节点. 从节点可以在选举中成为主节点.  ...

  9. PWC6199:Generated servlet error:Only a type can be imported. org.apache.jasper.tagplugins.jstl.core.ForEach resolves to a package

    <%@ import="org.apache.jasper.tagplugins.jstl.core.ForEach"%> 去掉这条语句,就不报错了.所以问题就出在这里 ...

  10. 2020牛客寒假算法基础集训营5 部分题解(BDEH)

    B: 牛牛战队的比赛地(二分做法)题意:二维平面给定n个点,在x轴找一点使得到n个点距离的最大值最小. 思路:我们可以将问题转化为在x轴找到一个圆心,使得该圆包含这n个点且半径最小,这样就变成了最小圆 ...