图片自适应，完整代码 完整代码

以下是一个简单的HTML、CSS代码，可以让一张图片在不同手机屏幕上自适应，保持清晰且不变形：

HTML代码：

<div class="image-container">
  <img src="your-image-url.jpg" alt="your-image-alt" />
</div>

CSS代码：

.image-container {
  width: 100%; /* 让容器与手机屏幕宽度100%相等 */
  height: auto; /* 高度自适应，根据图片宽高比自动计算高度 */
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 图片水平居中 */
  align-items: center; /* 图片垂直居中 */
}
.image-container img {
  max-width: 100%; /* 图片最大宽度100%，避免拉伸或变形 */
  height: auto; /* 图片高度自适应，根据宽高比自动计算高度 */
}

说明：

1. 将图片包裹在一个容器中（.image-container），然后使用flex布局让图片在容器内水平居中、垂直居中。

2. 图片的最大宽度设置为100%，这样图片会根据手机屏幕的宽度自动缩放，避免了图片变形或拉伸。

3. 图片的高度设为auto，这样图片会根据宽高比自动计算出高度，保证了图片不会变形。