CSS 图像大小

时间:2024-01-03 14:49:29

CSS 图像大小

虽然在HTML中,img标签有属性height、width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小。

给盒子设置属性height、width限制大小。单位通常是像素。

示例

<!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>