CSS设置图片缩放

最新推荐文章于 2024-06-05 17:35:31 发布

量变决定质变

最新推荐文章于 2024-06-05 17:35:31 发布

阅读量1.1w

点赞数

分类专栏： ————CSS

本文链接：https://blog.csdn.net/nangeali/article/details/52662387

版权

————CSS 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

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
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS设置图片缩放

CSS设置图片缩放 CSS设置图片的大小和HTML中一样，也是通过width和height属性实现的，不同的是，CSS中可以有更多的值。和文字大小一样，图片的大小也可以设置相对值和绝对值，例如，当设置width的值为50%，表示图片的宽度为父元素宽度的一半。图片缩放 <!-- img.test1{
复制链接

扫一扫