CSS 图像
CSS 图像
<上一节 下一节>通过CSS可以控制图像的大小和对齐方式。
图像大小
虽然在HTML中，img标签有属性height、width设置高和宽，在工作中却使用得非常少，通常使用CSS来控制大小。
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。给盒子设置属性height、width限制大小。单位通常是像素。
示例
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html> < html > < head > < title >图像大小</ title > < style type = "text/css" > img.large { width: 500px; height: 500px;} img.medium { width: 250px; height: 250px;} img.small { width: 100px; height: 100px;} </ style > </ head > < body > < h1 >软件开发，成就梦想</ h1 > < h2 >学编程，上利永贞网 https://www.liyongzhen.com/</ h2 > < img src = "https://www.0735it.net/images/kc/jspservlet.jpg" class = "large" alt = "Magnolia" /> < img src = "https://www.0735it.net/images/kc/jspservlet.jpg" class = "medium" alt = "Magnolia" /> < img src = "https://www.0735it.net/images/kc/jspservlet.jpg" class = "small" alt = "Magnolia" /> </ body > </ html > |
图像剧中对齐
我们在《CSS 内外边距》学过内容居中，它的原理是将外边左右设置为auto。图像居中也是这个原理。
示例
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html> < html > < head > < title >图像居中</ title > < meta charset = "UTF-8" > < style type = "text/css" > img.align-center { display: block; margin: 0px auto;} img.medium { width: 250px; height: 250px;} </ style > </ head > < body > < h1 >软件开发，成就梦想</ h1 > < h2 >学编程，上利永贞网 https://www.liyongzhen.com/</ h2 > < p >< img src = "https://www.0735it.net/images/kc/jspservlet.jpg" alt = "Servlet/JSP课程" class = "align-center medium" /> < b >< i >Servlet</ i ></ b > 用Java编写的服务器端程序，可以交互式地浏览和修改数据，生成动态Web内容。是Java企业级应用技术第一站。</ p > </ body > </ html > |
图像左右对齐
左右对齐图像使用的技术是浮动div元素。
float:left 左对齐
float:right右对齐
示例
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> < html > < head > < title >图像左右对齐</ title > < meta charset = "UTF-8" > < style type = "text/css" > body { font-family: Georgia, "Times New Roman", serif; color: #665544;} img.align-left { float: left; margin-right: 10px;} img.align-right { float: right; margin-left: 10px;} img.medium { width: 250px; height: 250px;} </ style > </ head > < body > < h1 >软件开发，成就梦想</ h1 > < h2 >学编程，上利永贞网 https://www.liyongzhen.com/</ h2 > < p >< img src = "https://www.0735it.net/images/kc/jspservlet.jpg" alt = "Servlet/JSP课程" class = "align-left medium" />< b >< i >Servlet</ i > </ b > 用Java编写的服务器端程序，可以交互式地浏览和修改数据，生成动态Web内容。是Java企业级应用技术第一站。</ p > < p >< img src = "https://www.0735it.net/images/kc/h5.jpg" alt = "HTML5 课程" class = "align-right medium" /> < b >< i >HTML5</ i ></ b > 由万维网联盟（W3C）2014年10月完成標準制定，取代1999年所制定的HTML 4.01和XHTML 1.0標準。HTML5 已广泛应用于各行各业。</ p > </ body > </ html > |
更多精彩
