Home > Web Front-end > HTML Tutorial > CSS controls image scaling or partial display_html/css_WEB-ITnose

CSS controls image scaling or partial display_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:45:48
Original
1528 people have browsed it

 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>
Copy after login

This is purely a personal summary, please don’t comment if you don’t like it, thank you.

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template