首页 > 编程笔记

CSS控制图片大小的方法

用 CSS 控制图片大小的方法与用 HTML 一样，也是通过 width 和 height 两个属性来实现的。不同的是，CSS 中可以使用更多的属性值，如相对值和绝对值等。

例如，当设置 width 属性值为 50% 时，图片的宽度将被调整为父元素宽度的一半，代码如下：

<html>
<head>
    <title>图片缩放</title>
    <style>
    img.test1{
        width:50%;        /* 相对宽度 */
    }
    </style>
</head>
<body>
     <img src="cup.jpg" class="test1">
</body>
</html>

因为设置的是相对大小（相对于 body 的宽度），所以当拖动浏览器窗口以改变其宽度时，图片的大小也会相应地发生变化。

这里需要指出的是，当只设置了图片的 width 属性，而没有设置 height 属性时，图片本身会自动等比例缩放，如果只设置 height 属性也是一样的道理。只有同时设置 width 和 height 属性时才会不等比例缩放，代码如下。

<html>
<head>
    <title>不等比例缩放</title>
    <style>
    img.test1{
        width:70%;         /* 相对宽度 */
        height:110px;      /* 绝对高度 */
    }
    </style>
</head>
<body>
     <img src="cup.jpg" class="test1">
</body>
</html>

CSS控制图片大小的方法

推荐阅读