在HTML5页面开发中，图片尺寸的适配是前端布局的重要部分，不合理的图片宽度很容易导致页面布局错乱，尤其是移动端场景下，大尺寸图片会直接破坏整体排版效果。限定图片最大宽度可以有效避免这类问题，让图片在不同屏幕尺寸下都能合理显示。
使用CSS max-width属性限定
CSS的max-width属性是限定图片最大宽度的核心方式，它定义了元素的最大宽度，当元素内容宽度小于这个值时，元素会保持原有宽度，只有当内容宽度超过设定值时，才会被限制到最大宽度，且不会小于min-width的设定值。
可以通过外部样式表或者内部样式表为图片设置最大宽度，示例如下：
/* 为所有img标签设置最大宽度不超过父容器宽度的100% */
img {
max-width: 100%;
/* 可选：保持图片比例，避免拉伸变形 */
height: auto;
}
如果只需要针对特定图片设置，可以给图片添加类名，再针对性设置样式：
/* 定义限制最大宽度的图片类 */
.limit-img-width {
max-width: 800px;
height: auto;
}
<img src="test.jpg" alt="示例图片" class="limit-img-width">
内联样式快速限定
如果只是单个图片需要临时设置最大宽度，不需要额外写CSS规则，直接使用内联样式即可，这种方式优先级更高，适合快速调整单个元素的样式。
<img src="demo.jpg" alt="演示图片" style="max-width: 600px; height: auto;">
结合width属性使用
有时候我们需要图片默认有一个合适的宽度，同时不超过最大宽度，这时候可以结合width和max-width一起使用，width设置默认宽度，max-width作为上限约束。
.adaptive-img {
/* 默认宽度为400px */
width: 400px;
/* 最大宽度不超过父容器宽度的90% */
max-width: 90%;
height: auto;
}
响应式场景下的适配
在不同屏幕尺寸下，可能需要设置不同的最大宽度，这时候可以配合媒体查询实现响应式约束。
/* 默认移动端优先，图片最大宽度为100% */
img {
max-width: 100%;
height: auto;
}
/* 屏幕宽度大于768px时，图片最大宽度设为800px */
@media (min-width: 768px) {
img {
max-width: 800px;
}
}
/* 屏幕宽度大于1200px时，图片最大宽度设为1000px */
@media (min-width: 1200px) {
img {
max-width: 1000px;
}
}
注意事项
- 设置
max-width时建议同时设置height: auto，避免图片比例失真变形。 - 如果图片本身宽度小于
max-width的设定值，图片会保持原有尺寸，不会强制放大。 - 内联样式的优先级高于外部样式表和内部样式表，如果需要覆盖内联样式的设置，需要使用更优先的选择器或者添加
!important，但尽量不要滥用!important。 - 如果页面中使用了
box-sizing: border-box，max-width会包含内边距和边框的宽度，设置时需要注意计算实际可用内容宽度。
通过以上几种方式，就可以在HTML5中灵活限定图片的最大宽度，根据实际的开发场景选择合适的方法，就能让页面中的图片显示更规范，适配不同的浏览环境。