CSS控制图片缩放或者部分显示

浏览数：26 / 时间：2015年06月09日

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>CSS控制图片缩放或者部分显示</title>
 6 </head>
 7     
 8 <body>
 9 <!--图片自动缩放显示：通过设置图片宽来实现-->
10     
11     
12     <!--第一种：设置图片的宽为屏幕宽度的百分比，实现图片跟随屏幕大小自动缩放-->
13     <p><img src="images/1.jpg" style="width:40%"/><p>
14     
15     <!--第二种：设置max-width、max-height自动适应父容器，设置max-height有一个缺点就是当图片宽度大于容量时会超出父容器或者显示不全（父容器overflow:hidden;）-->
16     <div style="width:200px; height:200px; border:1px dashed red;">
17         <img src="images/1.jpg" style="max-width:200px;"/>
18     </div>
19     <div style="width:200px; height:200px; border:1px dashed red; overflow:hidden;">
20         <img src="images/1.jpg" style="max-height:200px;"/>
21     </div>
22     
23 <!--显示图片部分内容的三种方法--> 
24 
25 
26     <!--第一种方法：对于不定长的背景图片来说比较好用,显示正中央部分-->
27     <div style="width:200px; height:200px; border:1px dashed red; background:url(images/3.jpg) no-repeat center center"></div>
28     
29     <!--第二种：父容器设置为overflow:hidden;然后把margin的值设置为负来实现-->
30     <div style="width:300px; height:300px; border:1px solid red; overflow:hidden;">
31         <img src="images/2.jpg" style="margin-top:-25px; margin-left:-50px;"/>
32     </div>
33     
34     <!--第三种：先设置父相子绝的定位，然后通过将top和left的值设置为负值-->
35     <div style="width:300px; height:300px; border:1px solid red; position:absolute; overflow:hidden;">
36         <img src="images/2.jpg" style="position:absolute; top:-200px; left:-100px;"/>
37     </div>
38 
39 </body>
40 </html>