当前位置：首页> 正文

如何把图片大小变小？

我们在布局图片列表时，通常我们要控制图片的高度和宽度这样来达到图片统一。我们在HTML布局时候直接在图片img标签加宽度和高度属性即可控制图片高和宽。

一、html img图片标签高度宽度设置

我们可以直接在图片标签设置宽度width和高度height，这里需要注意的是HTML img标签内直接设置宽度和高度值不需要html单位，默认为PX像素。

<img src="1.webp" width="150" height="60" />

img标签内设置高度宽度优点直观，对于文章内插入图片可以利用此方法控制设置图片高度宽度；缺点，如果图片列表排版的这样会增加很多HTML代码，不便统一修改。

二、CSS样式控制width、height

语法：

img{
width:150px;
height:60px
}

这里设置CSS宽度为150px,css高度为60px,注意是CSS样式中css width和css height的值都带单位也要记住一定带上单位，这里和HTML img标签内设置高度宽度不带单位一定区别大家一定注意并记住此知识点。

如果是我们直接对img设置样式，这样会将整个网页中图片宽度高度控制了。为了控制指定对象内的图片宽度高度样式，我们通常在img前加上对象CSS命名。

示例：

我们在一个HTML中放图片，1张为原始大小图片，1张为通过CSS设置宽度和高度图片，通过2张图片对比分析通过CSS改变图片大小。

<!DOCTYPE html> 
<html> 
<head> 

<title>css控制图片大小在线演示</title> 
<style> 
.divcss img{ width:300px; height:100px} 
</style> 
</head> 
 
<body> 
<p><strong>原始图片大小</strong></p> 
<p><img src="1.webp"><br> 
本身这个图片宽度为3840px高度2160px</p> 
<p><strong>通过CSS改变设置图片大小</strong></p> 
<div  class="divcss"> 
    <img src="1.webp"><br> 
    这里设置divcss盒子里图片宽度300px高度100px 
</div> 
</body> 
</html>

运行结果：