我们在布局图片列表时,通常我们要控制图片的高度和宽度这样来达到图片统一。如何使用CSS控制HTML中图片高度宽度,统一对象内图片高度宽度等样式属性?
img标签内设置高度宽度优点直观,对于文章内插入图片可以利用此方法控制设置图片高度宽度;缺点,如果图片列表排版的这样会增加很多HTML代码,不便统一修改。
css控制图片大小:
语法:img{width:150px;height:60px}
解释语法结构:对象选择器命名加一个空格然后输入img接着“{...}”构成控制指定对象内图片样式。
这里设置CSS宽度为150px,css高度为60px,注意是CSS样式中css width和css height的值都带单位也要记住一定带上单位,这里和HTML img标签内设置高度宽度不带单位一定区别大家一定注意并记住此知识点。
如果是我们直接对img设置样式,这样会将整个网页中图片宽度高度控制了。为了控制指定对象内的图片宽度高度样式,我们通常在img前加上对象CSS命名。
示例:
css控制图片大小在线演示.divcss img{ width:300px; height:100px}
原始图片大小
本身这个图片宽度为160px高度76px
通过CSS改变设置图片大小
这里设置divcss5盒子里图片宽度300px高度100px
效果图: