响应式图片最简方案是为img标签设置max-width: 100%和height: auto，确保不拉伸、不溢出且保持比例；全屏背景图则推荐div+background-size: cover/contain配合center居中。

用 CSS 的 max-width: 100% 配合 height: auto 就能实现图片随窗口缩放，保持比例不拉伸、不溢出。

基础写法：响应式图片最简方案

只需给 标签加两行 CSS：

• max-width: 100%：让图片宽度最大不超过其容器（比如父 div 或浏览器视口）
• height: auto：高度自动按原始宽高比计算，避免变形

示例代码：

适配全屏背景图（非语义化图片）

如果想让一张图铺满整个浏览器窗口（如 banner），更适合用

+ 背景图方式：

• 用 background-size: cover 全图覆盖，裁剪多余部分
• 或用 background-size: contain 完整显示，留白也保持比例
• 加上 background-position: center 居中，避免偏移

示例：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

配合容器控制显示区域

单独设图片样式有时不够，尤其当父容器没限定尺寸时。建议组合使用：

• 给图片外层的
  设置 width（如 width: 80% 或 max-width: 1200px）
• 图片本身仍用 max-width: 100%; height: auto
• 这样既响应窗口，又防止在大屏上撑得太宽

补充细节：避免常见问题

实际使用中注意这几点：

• 不要同时设 width 和 height 固定值，会强制拉伸失真
• 如果图片是内容核心（如文章配图），建议保留 alt 属性，兼顾可访问性
• 在移动端，可加 width: 100% 防止 Safari 等浏览器默认不缩放
• 需要高清适配时，可用 srcset 提供多分辨率图片