css怎么改变图片大小?

css怎么改变图片大小?下面本篇文章就来给大家介绍一下使用css改变图片大小的方法,希望对大家有所帮助。

在HTML页面中,图片的显示方法有两种,分别为:img图片,background(背景)图片。根据不同的显示方法,有不同的改变图片大小的方法:

1、改变img图片的大小

想要改变img图片的大小,可以通过设置height和width属性实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>

	<body>
		<img src="/i/bg_flower.webp" style="width:50px;height: 50px;">
		<br />
		<img src="/i/bg_flower.webp" style="width:100px;height: 100px;">
		<br />
		<img src="/i/bg_flower.webp"  style="width:200px;height: 200px;">
	</body>

</html>

效果图:

1、改变background(背景)图片的大小

想要改变background(背景)图片的大小,可以通过设置background-size属性实现,background-size 属性规定背景图像的尺寸。

<!DOCTYPE html>
<html>
<head>
<style> 
body
{
background:url(/i/bg_flower.webp);
background-size:63px 100px;
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head>

<body>
<p>上面是缩小的背景图片。</p>

<p>原始图片:<img src="/i/bg_flower.webp" alt="Flowers"></p>

</body>
</html>

效果图:

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

推荐阅读