background-size属性
background-size属性规定背景图像的尺寸。
语法：
background-size: length;
length：设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 "auto"。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
width: 400px;
height: 200px;
}
.box1{
background:url(2.webp) no-repeat;
}
.box2{
background:url(2.webp) no-repeat;
background-size: 200px 160px;
}
</style>
</head>
<body>
<p><strong>原始图片大小</strong></p>
<div class="box1"></div>
<br />
<p><strong>CSS设置图片宽和高</strong></p>
<div class="box2"></div>
</body>
</html>效果图：
width属性和height属性
width属性设置元素的宽度；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="2.webp"><br> </div>
<br />
<p><strong>CSS设置图片宽和高</strong></p>
<div>
<img src="2.webp" class="img"><br>
</div>
</body>
</html>效果图：
更多前端开发知识，请访问 前端开发 ！！
以上就是css怎么定义图片宽和高？的详细内容，更多请关注易知道|edz.cc其它相关文章！
