手机H5,用Jquery使图片自动填满两栏式排版

遇上这样的排版,手机的解象度都不同,假如只用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使图片自动填满两栏式排版的更多相关文章
- li 水平排列并自动填满 ul
找了li 如何水平排列并自动填满 ul,同时 li 宽度平均?资料,里面有提到"请用js动态计算保证兼容性", 因为我想实现的是,水平滚动条,ul的上级div是固定的宽度1000p ...
- [WP8] ListBox的Item宽度自动填满
[WP8] ListBox的Item宽度自动填满 范例下载 范例程序代码:点此下载 问题情景 开发WP8应用程序的时候,常常会需要使用ListBox作为容器来呈现各种数据集合.但是在ListBox呈现 ...
- ext:grid分页,列宽度自动填满grid宽度
var cm = new Ext.grid.ColumnModel([{ header : '编号', dataIndex : 'id' }, { header ...
- jQuery:图片自动变换
<script type="text/javascript"> var aa=0; //设置变换时间为2s var timeChange=2000; //定义数组 va ...
- 两个DIV,左DIV宽度固定,右DIV自动填满剩余空间
<style type="text/css"> #main{ width:98%; } #sidebar{ float:left; width:200px; backg ...
- css布局------左边宽度不定,右边宽度自动填满剩余空间
HTML <div class="container"> <div class="left"></div> <div ...
- -webkit-box 高度自动填满
<style> .box{ display: -webkit-box; -webkit-box-orient: vertical; height: 200px; background: # ...
- jquery 图片自动切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- android自定义控件(8)-利用onMeasure测量使图片拉伸永不变形,解决屏幕适配问题
使用ImageView会遇到的问题 在Android应用中,都少不了图片的显示,ImageView,轮播图,ViewPager等等,很多都是来显示图片的,很多时候,我们都希望图片能够在宽度上填充父窗体 ...
随机推荐
- Spring Boot2(007):关于Spring beans、依赖注入 和 @SpringBootApplication 注解
一.关于Spring beans 和 依赖注入(Dependency Injection) spring boot 和 Spring 全家桶无缝衔接,开发过程中可以很轻松地使用 Spring 全家桶的 ...
- FindWindowXG
测试: 函数代码: function FindWindowXG(strClass, strTitle: string): THandle; var hd: THandle; arrClass: ..] ...
- VM ESXi虚拟化使用学习笔记
由于疫情原因,没有条件介绍安装部分的内容,也没有安装部分内容的相关截图,所以安装部分可以选择网上资料.但是只要熟练安装CentOS系统的,基本安装ESXi一看就会,设置主机地址方面有一定图形化界面,比 ...
- Python MySQL 插入表
章节 Python MySQL 入门 Python MySQL 创建数据库 Python MySQL 创建表 Python MySQL 插入表 Python MySQL Select Python M ...
- Node.js 发送Email
章节 Node.js 介绍 Node.js 入门 Node.js 模块 Node.js HTTP模块 Node.js 文件系统模块 Node.js URL模块 Node.js NPM Node.js ...
- json字符串格式化显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 第七篇 Django-认证系统
Django-认证系统 阅读目录(Content) 1 Cookie 与 Session 概念 查看cookie 登陆应用 Django中操作Cookie 1.获取Cookie 2.设置Cookie ...
- POJ 2251 Dungeon Master(三维空间bfs)
题意:三维空间求最短路,可前后左右上下移动. 分析:开三维数组即可. #include<cstdio> #include<cstring> #include<queue& ...
- SpringAOP 使用注解的简单使用
1. 导入jar包 /SpringAOPmy/lib/com.springsource.net.sf.cglib-2.2.0.jar/SpringAOPmy/lib/com.springsource. ...
- 51Nod大数加法(两个数正负都可)
很多大数的问题都运用模拟的思想,但是这个说一样也一样,但是难度较大,很麻烦,我自己谢写了100多行的代码,感觉很对,但就是WA.其实个人感觉C和C++没有大数类,是对人思想和算法的考验,但是有时候做不 ...