img怎么用css修改大小?

img怎么用css修改大小?下面本篇文章就来给大家介绍一下使用CSS修改img图片大小的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

想要修改img图片的大小,可以通过设置heightwidth属性实现。

width属性设置元素的宽度,height属性设置元素的高度。这两个属性定义元素内容区的宽度和高度,在内容区外面可以增加内边距、边框和外边距。

行内非替换元素会忽略width属性和height属性。

width属性和height属性的属性值:

  • auto:默认。浏览器会计算出实际的高度。

  • length:使用 px、cm 等单位定义高度。

  • /code>:基于包含它的块级对象的百分比高度。

  • inherit:规定应该从父元素继承 height 属性的值。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.img{
				width: 200px;
				height: 100px;
			}
		</style>
	</head>

	<body>
		<p><strong>原始图片大小</strong></p> 
		<div>
			<img src="3.webp"><br> 
		本身这个图片宽度为400px,高度225px</div> 
		<br />
		<p><strong>通过CSS修改图片大小</strong></p> 
		<div>
			<img src="3.webp" class="img"><br>
		本身这个图片宽度为200px,高度100px
		</div>
		
	</body>

</html>

效果图:

更多前端开发知识,请查阅 HTML中文网 !!

以上就是img怎么用css修改大小?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读