1、使用 width 和 height 属性:
img {
width: 100px; /* 设置宽度 */
height: auto; /* 高度自动 */
}
2、使用 aspect-ratio 属性(可使用现代浏览器支持):
img {
aspect-ratio: 16 / 9; /* 设置宽高比为16:9 */
}
CSS图像布局:width,heightvsaspect-ratio属性在响应式设计中的应用
本文介绍了在CSS中如何使用`width`和`height`属性以及新引入的`aspect-ratio`属性来控制图片尺寸,重点讲解了这两种方法在响应式设计中的作用和适用场景。
1、使用 width 和 height 属性:
img {
width: 100px; /* 设置宽度 */
height: auto; /* 高度自动 */
}
2、使用 aspect-ratio 属性(可使用现代浏览器支持):
img {
aspect-ratio: 16 / 9; /* 设置宽高比为16:9 */
}

被折叠的 条评论
为什么被折叠?