需求：
在一個頁面下生成一個廣告圖片，寬高比為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%：
處理完的效果：
