在HTML列表入图片怎么变小,科技常识：html如何把图片大小变小

今天小编跟大家讲解下有关html如何把图片大小变小 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关html如何把图片大小变小 的相关资料，希望小伙伴们看了有所帮助。

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

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

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

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改变图片大小。

css控制图片大小在线演示

.divcss img{ width:300px; height:100px}

原始图片大小

本身这个图片宽度为3840px高度2160px

通过CSS改变设置图片大小

这里设置divcss盒子里图片宽度300px高度100px

来源：爱蒂网

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时候联系我们修改或删除，多谢。