在不同屏幕尺寸下让图片自适应，可通过多种 CSS 技术实现，以下为你详细介绍：
1、使用 max-width: 100%; height: auto;
这是最基础且常用的方法，能让图片在不超过其原始大小的前提下，宽度随容器自适应，高度按比例缩放。
解释：max-width: 100% 保证图片宽度不会超出其父容器的宽度；height: auto 使图片高度根据原始宽高比自动调整，防止图片变形。
img {
max-width: 100%;
height: auto;
}
...............................................................................................
<img src="your-image.jpg" alt="示例图片">2、结合媒体查询
媒体查询允许根据不同的屏幕尺寸应用不同的 CSS 规则，你可以针对不同的屏幕范围设置图片的大小。
解释：在屏幕宽度小于 768px 时，图片采用 max-width: 100% 自适应；当屏幕宽度大于等于 768px 时，图片宽度变为父容器的 50%；当屏幕宽度大于等于 1200px 时，图片宽度变为父容器的 30%。
img {
max-width: 100%;
height: auto;
}
@media (min-width: 768px) {
img {
width: 50%;
}
}
@media (min-width: 1200px) {
img {
width: 30%;
}
}
..............................................................................................
<img src="your-image.jpg" alt="示例图片">3、使用 object-fit 属性
object-fit 属性可以控制图片在容器内的填充方式，结合固定宽高容器能实现更灵活的自适应效果。
解释：.image-container 是一个固定宽高的容器，object-fit: cover 让图片按比例缩放，覆盖整个容器，可能会裁剪部分图片，但能保证图片填满容器且不变形。object-fit 还有 contain（图片完整显示在容器内，可能留空白）、fill（拉伸或压缩图片填充容器，可能变形）等取值，可按需选择。
.image-container {
width: 100%;
height: 300px;
border: 1px solid #ccc;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.................................................................................................
<div class="image-container">
<img src="your-image.jpg" alt="示例图片">
</div>4、利用视口单位（vw、vh）
解释：width: 50vw 表示图片宽度始终为视口宽度的 50%，无论屏幕尺寸如何变化，图片都会按此比例缩放。
img {
width: 50vw; /* 图片宽度为视口宽度的 50% */
height: auto;
}
....................................................................................................
<img src="your-image.jpg" alt="示例图片">
