HTML中怎么让响应式图片在横屏和竖屏下自动适配-html教程-PHP中文网

只设 max-width: 100% 在竖屏下仍可能出问题，因其仅约束宽度，未处理竖屏高宽比失配、父容器高度失控及视口方向变化导致的裁剪或留白；需配合 viewport 声明、aspect-ratio 容器、object-fit 及 orientation 媒体查询协同解决。

html中怎么让响应式图片在横屏和竖屏下自动适配

为什么只设 `max-width: 100%` 在竖屏下还可能出问题

很多人加了 max-width: 100% 和 height: auto 后，发现横屏正常，但竖屏时图片被裁掉一半或上下留大片空白——这通常不是 CSS 写错了，而是没处理「设备方向」和「容器上下文」两个隐性依赖。

竖屏设备（尤其是手机）视口高度远大于宽度，而图片原始宽高比往往是横向的（比如 4:3 或 16:9）。仅靠等比缩放，图片会受限于父容器宽度，结果在竖屏中显得特别小、居中悬浮、上下空旷；反之，若父容器设了固定高度，又容易触发 object-fit: cover 的裁剪逻辑，把人脸或关键内容切掉。

解决思路不是“让图片自己适应”，而是“控制它所在的容器怎么给空间”。关键点有三个：

确保 <meta name="viewport"> 已正确声明，且位于最顶部：<meta name="viewport" content="width=device-width, initial-scale=1.0">。漏掉或写错会导致整个响应式链路失效
避免给图片父容器设死的 height 值（如 height: 500px），否则竖屏下高度溢出或压缩都会破坏布局流
如果图片需“撑满竖屏可视区域”，必须用 aspect-ratio 或 padding-top 技法锁定容器比例，再让图片填满

`object-fit` + `aspect-ratio` 是竖屏全屏图最稳的组合

当你要一张图在竖屏设备上“完整显示且占满屏幕高度”，又不想 JS 动态计算，object-fit: contain 配合固定宽高比容器是目前兼容性好、语义清晰的方案。

示例结构：

<div class="vertical-banner">
  @@##@@
</div>

CSS 如下：

.vertical-banner {
  width: 100vw;
  height: 100vh;
  aspect-ratio: 9 / 16; /* 典型竖屏比例，可按需调为 2/3 或 3/4 */
}
.vertical-banner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

注意几个易错点：

aspect-ratio 在 Safari 15.4+ 和 Chrome/Firefox 现代版中稳定支持；老版本可用 padding-top 替代（如 padding-top: 177.77% 对应 9/16）
别对 img 单独设 max-width: 100% —— 它已由父容器尺寸约束，再加会干扰 object-fit 行为
object-position: center 可确保关键内容（如人脸）不被边缘裁掉，尤其在 contain 模式下留白时仍居中

用 `@media (orientation: portrait)` 单独控制竖屏样式

有些场景下，你希望横屏用横图、竖屏用竖图，或者竖屏时降低图片分辨率以节省带宽——这时不能只靠 CSS 缩放，得用媒体查询配合 <picture></picture> 或类名切换。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

直接生效的写法：

@media (orientation: portrait) {
  .responsive-img {
    width: 100%;
    height: auto;
  }
  .responsive-img[src*=".jpg"]:not([src*="portrait"]) {
    /* 可选：强制竖屏加载特定后缀图，需配合 JS 或构建工具 */
  }
}

更推荐的做法是用 <picture></picture> 做源头分流：

<picture><source media="(orientation: portrait)" srcset="banner-portrait.webp"><source media="(orientation: landscape)" srcset="banner-landscape.webp">
  @@##@@
</source></source></picture>

注意：

(orientation: portrait) 是 CSS 媒体特性，浏览器原生支持，无需 JS 监听 resize
它检测的是**当前视口方向**，不是设备物理朝向，所以旋转屏幕会立即触发重绘
不要和 (max-width: ...) 混用在同一 <source></source> 中——优先级混乱，建议拆成独立 <source></source> 条目