CSS设置图片缩放
CSS设置图片的大小和HTML中一样,也是通过width和height属性实现的,不同的是,CSS中可以有更多的值。
和文字大小一样,图片的大小也可以设置相对值和绝对值,例如,当设置width的值为50%,表示图片的宽度为父元素宽度的一半。
<span style="font-size:24px;"><html>
<head>
<title>
图片缩放
</title>
<style>
<!--
img.test1{
width:50%;
}
-->
</style>
</head>
<body>
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test1">
</body>
</html></span>
代码如上,这里设置的为相对大小,因此当浏览器窗口改变大小时,图片的大小也会跟着发生改变。
当仅仅设置了图片的width属性,而没有设置height属性时,图片的本身会自动的等纵横比例缩放,如果只设置了height属性也是一样。
只有当同时设定了width和height属性时,才不会等比例缩放。
<span style="font-size:24px;"><html>
<head>
<title>
不等比例缩放
</title>
<style>
<!--
img.test1{
width:70%;
height:110px;
}
-->
</style>
</head>
<body>
<img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"" class="test1">
</body>
</html>
</span>
此时,图片的高度固定了,当浏览器的窗口变化时,只有图片的宽度随着浏览器的改变而改变。