需求：
在一个页面下生成一个广告图片，宽高比为3:1，其实就是把图片的宽度调整成100%，然后这时候高度肯定是高比宽度的1/3大的，只要将中间的部分显示出来就行了。将图片放到一个长宽比为3:1的div中，div的overflow属性设置成hidden防止被图片撑大，然后将图片向上移动，让中间部分显示到div中。
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <script src="jquery-3.2.1.min.js"></script> 8 <style> 9 .picCon{ 10 overflow: hidden; /*防止div被图片撑大*/ 11 } 12 .adPic{ 13 position: relative; /*改成相对div的定位*/ 14 } 15 </style> 16 <title>Document</title> 17 </head> 18 <body> 19 <div class="picCon"> 20 <img src="adPicture.jpg" class="adPic" width="100%"> 21 </div> 22 </body> 23 <script> 24 window.onload = function() { //如果用$(function(){}) 此时图片可能没加载出来，下面获取的图片的高度就是0 25 var width = $(document.body).width(); 26 var height = width/3; 27 var picHeight = $(".adPic").height(); 28 var dif = (-1*(parseFloat(picHeight) - height)/2) + "px"; //将图片的高度减去div高度再乘-1除2，得到图片位移量 29 $(".picCon").css("width",width); //将div宽度设置成网页宽度，高度设置为宽度的1/3 30 $(".picCon").css("height",height); 31 $(".adPic").css("top",dif); //图片向上移动dif 32 $(window).resize(function(){ //适应浏览器窗口大小的调整，下面的代码和上面是一样的 33 width = $(document.body).width(); //这里其实是有问题的，改变窗口大小要刷新一下才好用 34 height = width/3; 35 picHeight = $(".adPic").height(); 36 dif = (-1*(parseFloat(picHeight) - height)/2) + "px"; 37 $(".picCon").css("width",width); 38 $(".picCon").css("height",height); 39 $(".adPic").css("top",dif); 40 }) 41 } 42 </script> 43 </html>
目录：
效果：
只将图片宽度设置为100%：
处理完的效果：
