CSS控制图片缩放或者部分显示_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:45:481470검색
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="max-width:90%"/ alt="CSS控制图片缩放或者部分显示_html/css_WEB-ITnose" ><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:90%"/ alt="CSS控制图片缩放或者部分显示_html/css_WEB-ITnose" >18 </div>19 <div style="width:200px; height:200px; border:1px dashed red; overflow:hidden;">20 <img src="images/1.jpg" style="max-width:90%"/ alt="CSS控制图片缩放或者部分显示_html/css_WEB-ITnose" >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="max-width:90%"/ alt="CSS控制图片缩放或者部分显示_html/css_WEB-ITnose" >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="max-width:90%"/ alt="CSS控制图片缩放或者部分显示_html/css_WEB-ITnose" >37 </div>38 39 </body>40 </html>
纯属个人一些小总结，不喜勿喷，谢谢。
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：css Animation初体验_html/css_WEB-ITnose다음 기사：CSS规范