遇上这样的排版,手机的解象度都不同,假如只用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);