遇上这样的排版,手机的解象度都不同,假如只用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. Spring Boot2(007):关于Spring beans、依赖注入 和 @SpringBootApplication 注解

    一.关于Spring beans 和 依赖注入(Dependency Injection) spring boot 和 Spring 全家桶无缝衔接,开发过程中可以很轻松地使用 Spring 全家桶的 ...

  2. FindWindowXG

    测试: 函数代码: function FindWindowXG(strClass, strTitle: string): THandle; var hd: THandle; arrClass: ..] ...

  3. VM ESXi虚拟化使用学习笔记

    由于疫情原因,没有条件介绍安装部分的内容,也没有安装部分内容的相关截图,所以安装部分可以选择网上资料.但是只要熟练安装CentOS系统的,基本安装ESXi一看就会,设置主机地址方面有一定图形化界面,比 ...

  4. Python MySQL 插入表

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

  5. Node.js 发送Email

    章节 Node.js 介绍 Node.js 入门 Node.js 模块 Node.js HTTP模块 Node.js 文件系统模块 Node.js URL模块 Node.js NPM Node.js ...

  6. json字符串格式化显示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 第七篇 Django-认证系统

    Django-认证系统 阅读目录(Content) 1 Cookie 与 Session 概念 查看cookie 登陆应用 Django中操作Cookie 1.获取Cookie 2.设置Cookie ...

  8. POJ 2251 Dungeon Master(三维空间bfs)

    题意:三维空间求最短路,可前后左右上下移动. 分析:开三维数组即可. #include<cstdio> #include<cstring> #include<queue& ...

  9. SpringAOP 使用注解的简单使用

    1. 导入jar包 /SpringAOPmy/lib/com.springsource.net.sf.cglib-2.2.0.jar/SpringAOPmy/lib/com.springsource. ...

  10. 51Nod大数加法(两个数正负都可)

    很多大数的问题都运用模拟的思想,但是这个说一样也一样,但是难度较大,很麻烦,我自己谢写了100多行的代码,感觉很对,但就是WA.其实个人感觉C和C++没有大数类,是对人思想和算法的考验,但是有时候做不 ...