HTML中图片的截取一部分显示

最新推荐文章于 2022-12-04 16:18:35 发布

weixin_30950607

最新推荐文章于 2022-12-04 16:18:35 发布

阅读量2k

点赞数

原文链接：http://www.cnblogs.com/lianxing/p/7828857.html

版权

需求：

　　在一个页面下生成一个广告图片，宽高比为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%：

　　处理完的效果：

转载于:https://www.cnblogs.com/lianxing/p/7828857.html

weixin_30950607

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML中图片的截取一部分显示

需求：　　在一个页面下生成一个广告图片，宽高比为3:1，其实就是把图片的宽度调整成100%，然后这时候高度肯定是高比宽度的1/3大的，只要将中间的部分显示出来就行了。将图片放到一个长宽比为3:1的div中，div的overflow属性设置成hidden防止被图片撑大，然后将图片向上移动，让中间部分显示到div中。代码： 1 <!DOCTYPE html> 2 &lt...
复制链接

扫一扫