HTML/CSS新手求助：移动端图片无法完整显示，求跨端一致方案

你提到手机端无法看到完整尺寸的图片，核心原因通常不是分辨率，而是缺少适配不同屏幕的CSS规则。下面是几种简单有效的解决方法：

方法一：基础响应式样式（最推荐新手） #

给图片添加以下CSS规则，让图片自适应容器宽度，同时保持比例完整：

img {
  max-width: 100%;
  height: auto;
}

这个规则会让图片在任何屏幕下都不会超出容器或视口宽度，高度自动按比例缩放，保证图片完整显示，不会被裁切。

方法二：固定尺寸+媒体查询（适合需要统一显示大小的场景） #

如果希望图片在PC和移动端尽量保持相同的显示尺寸，可通过媒体查询适配：

/* 默认（PC端）设置图片固定宽度 */
img {
  width: 800px;
  height: auto;
}

/* 当屏幕宽度小于768px（移动端）时，自动适配屏幕 */
@media (max-width: 768px) {
  img {
    max-width: 100%;
    height: auto;
  }
}

这样在屏幕足够大时图片保持固定宽度，屏幕较小时自动缩小，避免超出视口导致看不到完整图片。

方法三：用object-fit控制图片缩放方式 #

如果图片放在固定尺寸的容器里，想让图片完整填充容器且不变形，可使用：

/* 先给图片容器设置固定尺寸 */
.img-container {
  width: 600px;
  height: 400px;
}

/* 让图片完整显示在容器内 */
.img-container img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持图片完整，容器空白区域留空 */
  /* 若需要填满容器可改用object-fit: cover，但会裁切图片边缘 */
}

问题截图： #

内容的提问来源于stack exchange，提问作者flyordie