遇上这样的排版,手机的解象度都不同,假如只用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. 全局保存ajax请求到的数据

    var menuJson = (function() {        var result;        $.ajax({            type: 'get',            u ...

  2. Oracle-SQL 建表

    建立员工分类表: 员工分类表结构.内容分别如下图:   一.使用PL/SQL Dev 这类可视化工具直接创建表 1.建立表结构 新建-table-名称(egrade)    然后 列:创建表结构 2. ...

  3. Azure Container Registry-基于开源 Docker Registry 的专用 Docker 注册表服务

    本文语雀知识库:https://www.yuque.com/seanyu/azure/acr 概述 Azure 容器注册表(Azrue Container Registry,简称ACR)是 Azure ...

  4. 九十六、SAP中ALV事件之九,显示功能按钮栏中显示ALV加强工具栏

    一.排查了很久,终于找到问题所在.把问题解决了,代码如下: 二.运行效果如下 三.试一试,标准功能都可以用 完美

  5. 洛谷 P2747 Canada Tour 周游加拿大 动态规划

    Description 你赢得了一场航空公司举办的比赛,奖品是一张加拿大机票.旅行在这家航空公司开放的最西边的城市开始,然后一直自西向东旅行,直到你到达最东边的城市,再由东向西返回,直到你回到开始的城 ...

  6. spring boot 实战教程

    二八法则 - get more with less Java.spring经过多年的发展,各种技术纷繁芜杂,初学者往往不知道该从何下手.其实开发技术的世界也符合二八法则,80%的场景中只有20%的技术 ...

  7. Markdown工具推荐

    Markdown 因语法简单,应用广泛,在近几年被很多开发者所喜爱.常用的语法不多,也就十来种吧.本人自从2017年接触就一发不可收拾. 在这几年里,用过了很多写Markdown的工具.接下来就以现在 ...

  8. Cobalt Strike简单使用(9,29第十五天)

    本文转自:https://www.cnblogs.com/yuanshu/p/11616657.html 一.介绍: 后渗透测试工具,基于Java开发,适用于团队间协同作战,简称“CS”. CS分为客 ...

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

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

  10. 4 ~ express ~ 划分模块开发

    一,根据功能进行模块划分 1,前台模块 2,后台管理模块 3,API模块 二,使用 app.use() 进行模块划分 1,app.use('/',require('./router/main')) 1 ...