如何用HTML编辑网页让图片在不同设备上完美显示-html教程-PHP中文网

图片在手机上溢出容器的根本原因是未设置max-width: 100%且缺少height: auto，导致浏览器按原始尺寸渲染而撑破窄屏；正确做法是统一设img { max-width: 100%; height: auto; }，并配合srcset适配retina屏。

如何用html编辑网页让图片在不同设备上完美显示

图片在手机上溢出容器怎么办

根本原因是没加 max-width: 100%，浏览器默认按原始尺寸渲染，宽屏图直接撑破窄屏布局。只设 width 属性也不行——它会强制拉伸或压缩，破坏比例。

正确做法是给所有 <img> 加统一 CSS：

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

注意两点：
• 不要用 width: 100% 替代，它会让小图被强行撑大、模糊；
• height: auto 必须配对出现，否则高度塌陷或变形。

如何让高清屏（Retina）也显示清晰图片

单纯一张 800×600 的 JPG，在 2x 屏上会被放大渲染，出现锯齿。浏览器需要知道“这张图有两倍分辨率可用”。

用 srcset 告诉浏览器多套资源：

@@##@@

关键点：
• src 是兜底方案，所有浏览器都支持；
• srcset 里的 1x/2x 是设备像素比（dpr），不是文件名规则；
• 如果你提供的是不同宽度的图（如 480w/768w/1200w），就得配合 sizes 属性，否则浏览器无法判断该选哪张。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

`<picture></picture>` 什么时候必须用

当你需要按屏幕尺寸切换不同裁剪版本（比如手机版只显示人脸、桌面版显示全身），或者想优先用 webp 但兼容老浏览器时，<picture></picture> 不可替代。

典型结构：

<picture><source srcset="hero-mobile.webp" media="(max-width: 768px)" type="image/webp"><source srcset="hero-desktop.webp" media="(min-width: 769px)" type="image/webp"><source srcset="hero-fallback.jpg" type="image/jpeg">
  @@##@@
</source></source></source></picture>

注意：
• <source></source> 按顺序匹配，第一个满足条件的生效；
• 最后一个 <img src="photo.jpg" srcset="photo.jpg 1x, photo@2x.jpg 2x" alt="示例"> 是必需的 fallback，不能省略；
• media 查询写法和 CSS 一致，但不支持 hover 等伪类。