html混合框架结构怎么设置图片大小,css怎么设置图片的大小?

我们在布局图片列表时,通常我们要控制图片的高度和宽度这样来达到图片统一。如何使用CSS控制HTML中图片高度宽度,统一对象内图片高度宽度等样式属性?

82354669abff6e5a8302d9ccaccee3cf.png

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}

原始图片大小

1.jpg

本身这个图片宽度为160px高度76px

通过CSS改变设置图片大小

1.jpg

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

效果图:

d633399fdd840b2c428c2bfd7843ae89.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值