需求：
在一个页面下生成一个广告图片，宽高比为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%：
处理完的效果：
