CSS設定圖片縮放

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

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>

          此時,圖片的高度固定了,當瀏覽器的視窗變化時,只有圖片的寬度隨著瀏覽器的改變而改變。

相關文章

程式語言 最新文章