手机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等等,很多都是来显示图片的,很多时候,我们都希望图片能够在宽度上填充父窗体 ...
随机推荐
- jenkins打包iOS 报错:error: exportArchive: The data couldn’t be read because it isn’t in the correct format.
在执行ios 打包的时候,我们通过执行下面的指令来打包ipa: mkdir arch archive_path=arch/${app_name}.xcarchive workspace_name=HP ...
- Docker Yearning + Inception SQL审核平台搭建
[一]安装[1.1]系统环境系统环境:CentOS Linux release 7.6.1708 (Core)系统内存:4G系统内核:1Python:3.6.4关闭iptables and selin ...
- 虚拟机安装centos6.5出现Error processing drive:pci-0000:00:10-scsi-0:0:0:0问题
vmware安装linux系统出现Error processing drive:pci-0000:00:10-scsi-0:0:0:0问题 问题出现原因:我给虚拟机的内存太小了,只给了512M 解决办 ...
- 在各浏览器和各分辨率下如何让div内的table垂直水平居中?
本文主要针对需要全屏显示的系统页面内,因为系统经常会用到表格table布局,偶尔的table需要显示在div的正中间,所以鄙人特此总结下div内table的万千姿态. <!DOCTYPE htm ...
- spring教程
Spring框架是Java EE开发中最流行的框架,已经成为JEE事实上的标准,全世界的开发人员都在使用Spring框架开发各种应用.随着Spring boot,Spring cloud新版本的不断推 ...
- css 基础知识 (待完善...)
CSS 1.position 属性 对元素进行定位. absolute 相对于 非static类型的position 的 第一个(临近的) 父元素 进行定位. ...
- 第十五篇 用户认证auth
用户认证auth 阅读目录(Content) 用户认证 auth模块 1 .authenticate() 2 .login(HttpRequest, user) 3 .logout(request) ...
- springboot+thymeleaf项目中使用th:replace访问templates子目录下的模板,会报错找不到模板路径
解决方法: 先将模板路径放置templates目录下,发现可以访问,说明th:replace是可以用的. 那可能是出现在路径问题上面. 于是我开始调错,改路径. 后来在网上查找资料.说了很多种方法. ...
- log4j的配置学习
我的 log4j.properties: # Set root category priority to INFO and its only appender to CONSOLE. #log4j.r ...
- 基础语法-其它流程控制语句break和continue
基础语法-其它流程控制语句break和continue 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.break语句 /** * break语句 * @author 尹正杰 * ...