Home > Article > Web Front-end > CSS控制图片缩放或者部分显示_html/css_WEB-ITnose
CSS控制图片缩放或者部分显示_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:45:481469browse
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>
纯属个人一些小总结，不喜勿喷，谢谢。
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css Animation初体验_html/css_WEB-ITnoseNext article：CSS规范