CSS设置图片缩放

来源：互联网发布：网络电视盒编辑：程序博客网时间：2024/05/01 18:51

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>

此时，图片的高度固定了，当浏览器的窗口变化时，只有图片的宽度随着浏览器的改变而改变。

0 0