手机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等等,很多都是来显示图片的,很多时候,我们都希望图片能够在宽度上填充父窗体 ...
随机推荐
- maven在windows下的安装配置及手动引入oracle数据库jar包
一.maven的安装配置 注意:在进行如下配置之前,有个前提是你的java的jdk安装配置正确才行 1.首先,下载maven,网址http://maven.apache.org/download.cg ...
- Node.js 加载静态资源css,js等不显示问题的解决方法
一,原因 1,没有响应到css等文件 2,响应类型是由文件的后缀名决定 (1)html的请求头 Content-Type : text/html ; charset=utf-8 (2) CSS的请求头 ...
- 计算机操作系统学习(一) Linux常用指令(随时更新)
1.chmod 以下转载至https://blog.csdn.net/summer_sy/article/details/70142475 chmod u+x file.sh 就表示对当前目录下的fi ...
- REST接口
全名是Representational State Transfer REST是设计风格而不是标准 建议将JSON格式作为标准响应格式 -------------------------------- ...
- 微信小程序添加背景图片的坑
给微信小程序页面加载背景图片解决方案 直接附上原文地址: 给微信小程序页面加载背景图片解决方案 - YUSIR 完美CODING世界 - CSDN博客 https://blog.csdn.net/y ...
- HDU 5455:Fang Fang 查cff个数
Fang Fang Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Others) Total ...
- Python之日志处理(logging模块)转载
本人主要做一个知识的归类与记录,如是转载类文章,居首都会备注原链接,尊重原创者,谢谢! 此文转载原链接:https://www.cnblogs.com/yyds/p/6901864.html 本节内容 ...
- WindowsForm ComboBoxList 下拉框带复选框 可以动态添加
先来张效果图: 1.这里需要对控件进行重写,详细内容如下,对此不感兴趣的可以直接跳过这步,下载本人生成的dll,直接看第二小结,下载链接https://pan.baidu.com/s/1gfzrK5t ...
- jQuery中的一些方法 19.5.20课上笔记
after() insertAfter():特定元素后面插入新的节点 before() insertBefore():特定元素前面插入新的节点 append() appendTo():向特定元素元素内 ...
- P1426 小鱼会有危险吗
题解: 在测试数据里有一个是临界值问题,探测范围是闭区间 #include<stdio.h>int main(){ double s,x; //注意:此 ...