三、使用百分比适配父容器
如果希望图片根据不同设备大小自动缩放，可以使用百分比单位：
img {
width: 80%;
height: auto;
}
这里，图片的宽度始终是父元素的80%，不管屏幕尺寸如何变化，图片都会自适应布局。
四、限制最大宽度和高度
有时候图片可能太大，撑破了页面结构，这时可以用 max-width 和 max-height 限制最大尺寸：
img {
max-width: 100%;
height: auto;
}
这段代码非常常见，意思是：图片最多不能超过容器宽度，保持等比例缩放。
五、设置固定尺寸但不拉伸图片
你可以通过 object-fit 属性控制图片在固定尺寸内的显示方式：
img {
width: 300px;
height: 200px;
object-fit: cover;
}
cover：等比例填充，可能会裁剪部分内容；
contain：完整显示整个图片，可能会留白；
fill：强制拉伸填满，不建议用于重要图片。
六、响应式布局中的常用写法
在响应式网页中，推荐如下写法实现图片自适应且防止溢出：
.responsive-img {
max-width: 100%;
height: auto;
display: block;
}
搭配 HTML 使用：
这种写法兼容性强，适合大多数场景，尤其在手机端表现良好。
七、背景图的大小控制方式
如果你使用的是 background-image，而不是 标签，也可以通过 background-size 来控制：
.banner {
background-image: url("banner.jpg");
background-size: cover;
}
cover：背景图等比填满容器；
contain：背景图完整显示；
100% 100%：非等比拉伸，可能会变形。
总结
通过灵活使用 width、height、max-width、object-fit 等CSS属性，可以轻松控制网页中图片的大小与展示效果。无论是固定尺寸、自动适应，还是响应式布局，都有对应的解决方案。合理设置图片大小，不仅能提升页面美观度，还能改善加载效率和用户体验。
掌握这些技巧后，你就能让网页上的每一张图片都恰到好处、自然得体！返回搜狐，查看更多
苹果手机模拟城市怎么重置游戏数据分析
中央广播电视总台发布关于2026年世界杯亚洲区预选赛十八强赛的声明