图片在网页设计中扮演了重要的角色，适当设置图片的宽高可以使网页更美观、结构更合理。那么，如何通过css设置图片的宽高呢？
首先，HTML代码中插入图片时需要注意以下几点：
- 使用alt属性：alt属性用于为插入的图片添加文本说明。如果图片无法加载，alt属性也可以帮助用户了解图片的内容。
- 指定图片的宽高：在设置图片宽高时，可以使用HTML标签的width和height属性。但这种方式不灵活，不能实现不同尺寸设备的响应式设计。
因此，使用CSS的background-image属性和background-size属性来设置图片的宽高是更好的选择。下面是一些实用的CSS技巧：
① 设置固定宽高
在CSS中使用width和height属性可以设置图片的固定宽高，如下所示：
立即学习“前端免费学习笔记（深入）”；
.img{
width: 300px; /*设置图片宽*/
height: 200px; /*设置图片高*/
}当然，也可以通过简写方式来设置：
.img{
width: 300px; height: 200px; /*用“；”隔开即可*/
}② 根据容器自适应宽高
有时候，我们需要实现图片随着所在容器大小的变化而自适应宽高。这时可以使用CSS中的background-size属性，设置其值为“contain”或“cover”。
奥硕企业网站管理系统终身免费版精简版1.0 build 090625
下载
奥硕企业网站管理系统具有一下特色功能1、双语双模（中英文采用单独模板设计，可制作中英文不同样式的网站）2、在线编辑JS动态菜单支持下拉效果，同时生成中文，英文，静态3个JS菜单3、在线制作并调用FLASH展示动画4、自动生成缩略图，可以自由设置宽高5、图片批量加水印，可以自由设置字体，大小，样式，水印位置（同时支持文字或图片类型水印）6、强大的标签式数据调用，可以调用（新闻，产品，下载，招聘）支持
“contain”表示图片完整显示，但可能不够宽或不够高；
“cover”表示图片铺满容器，但我们无法保证完整显示图片。
如下所示：
.img{
background-image: url(./img/bg.jpg); /*设置背景图片地址*/
background-size: contain; /*或者：background-size: cover;*/
}③ 等比缩放图片
为了保证图片的比例不变，我们可以设置一个值为百分比的“padding-top”属性。它会根据父容器的宽度来决定图片的高度，从而实现等比缩放。
.img{
background-image: url(./img/bg.jpg); /*设置背景图片地址*/
padding-top: 50%; /*比例数值等于图片的高/宽*100% */
background-size: cover; /*铺满背景容器*/
}以上是三种常见的CSS图片宽高设置方法。通过灵活运用，我们可以轻松实现网页设计中的图片展示优化，提升用户体验。
