设置图片随屏幕宽度自动缩放的关键是使用max-width: 100%和height: auto；通过CSS设置img { max-width: 100%; height: auto; display: block; }可确保图片在不同屏幕尺寸下等比缩放，不溢出容器且保持宽高比，避免变形，display: block还可消除行内空白；结合HTML中的img标签及父容器宽度设置（如.width: 80%），图片能响应式适应各种布局，核心是max-width与height: auto配合使用。
让图片随屏幕宽度自动缩放，关键是使用响应式设计方法。核心是设置图片的最大宽度为容器的100%，并允许其按比例缩放。
设置图片响应式缩放的基本CSS
以下是最常用且有效的方法：
max-width: 100%; 是关键属性，它确保图片不会超出其父容器的宽度，同时保持原有宽高比。
img {max-width: 100%;
height: auto;
display: block;
}
- max-width: 100%：防止图片在小屏幕上溢出
- height: auto：保持图片原始宽高比，避免拉伸变形
- display: block：去除行内元素下方的默认空白间隙（可选）
结合HTML结构使用
在HTML中直接插入图片即可：
立即学习“前端免费学习笔记（深入）”；
只要应用了上述CSS，无论屏幕多宽，图片都会等比缩放以适应容器。
在不同容器中的表现
如果图片放在一个设置了宽度的盒子中，它会根据盒子宽度调整大小：
.image-container {width: 80%;
margin: 0 auto;
}
.image-container img {
max-width: 100%;
height: auto;
}
这样即使屏幕变窄，图片也会随之缩小，保持布局完整。
基本上就这些，不复杂但容易忽略 height: auto 这一步，少了它图片可能变形。
