img图片缩小的方法
在CSS中可以使用height和width属性来缩小img图片。
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="1.jpg-600"><br>
本身这个图片宽度为400px，高度225px</div>
<br />
<p><strong>通过CSS使图片缩小</strong></p>
<div>
<img src="1.jpg-600" class="img"><br>
</div>
</body>
</html>效果图：
background背景图片缩小的方法
在CSS中，想要缩小背景图片，可以通过设置background-size属性来实现。
background-size属性规定背景图像的尺寸，可通过长度值或百分比来设置图片大小，或者通过cover和contain来对图片进行伸缩设置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div{
width: 400px;
height: 320px;
}
.box1{
background:url(1.jpg-600) no-repeat;
}
.box2{
background:url(1.jpg-600) no-repeat;
background-size: 200px 160px;
}
</style>
</head>
<body>
<p><strong>原始图片大小</strong></p>
<div class="box1"></div>
<p>本身这个图片宽度为400px，高度320px</p>
<br />
<p><strong>通过CSS缩小背景图片</strong></p>
<div class="box2"></div>
</body>
</html>效果图：
更多CSS相关知识，可访问 CSS教程 ！！
以上就是如何用css使图片缩小？的详细内容，更多请关注0133技术站其它相关文章！
