編碼的世界 / 優質文選 / 生涯

CSS設置圖片縮放

2021年11月24日
-   

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>

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

熱門文章