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