图片在网页设计中扮演了重要的角色，适当设置图片的宽高可以使网页更美观、结构更合理。那么，如何通过CSS设置图片的宽高呢？
首先，HTML代码中插入图片时需要注意以下几点：
因此，使用CSS的background-image属性和background-size属性来设置图片的宽高是更好的选择。下面是一些实用的CSS技巧：
① 设置固定宽高
在CSS中使用width和height属性可以设置图片的固定宽高，如下所示：
.img{
width: 300px; /*设置图片宽*/
height: 200px; /*设置图片高*/
}当然，也可以通过简写方式来设置：
.img{
width: 300px; height: 200px; /*用“；”隔开即可*/
}② 根据容器自适应宽高
有时候，我们需要实现图片随着所在容器大小的变化而自适应宽高。这时可以使用CSS中的background-size属性，设置其值为“contain”或“cover”。
“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图片宽高设置方法。通过灵活运用，我们可以轻松实现网页设计中的图片展示优化，提升用户体验。
以上是css怎么设置图片的宽高的详细内容。更多信息请关注PHP中文网其他相关文章！
