移动端矩形高清图片适配横屏显示的CSS技术求助

需求与现状 #

• 需求：移动端设备旋转至横屏时，让特定宽高比的矩形高清图（如1600×800）正常适配显示；主页面200×200方形图点击跳转至高清图页面，返回后主页面保持竖屏显示，无需锁定屏幕方向。
• 现状：高清图页面即使仅展示图片，设备横屏时仍只能以竖屏状态显示，问题示意图：
• 尝试：参考MDN orientation相关内容编写CSS但未生效，已反馈文档问题。

当前使用的CSS代码 #

/* style for CoinPages  */
* {
/* margin: 1rem; */
padding: .25rem;
/*  outline: solid black 2px;  */
box-sizing: border-box;
}

body {
/* display: flex; */
}

@media (orientation: landscape)
{
body {
margin: .5rem;
padding: .5rem;
background-image:
url('..< truncated here ***.jpg');
background-size: auto;
img {
border:  1px;
background-color: transparent;
}
}
}

p {
color: black;
text-align: center;
font-family: Times, Times New Roman, serif;
font-size: 1.0rem;
padding: 1rem;
}

font {
font-family: Times serif;
text-align: center;
height: 1.1rem;
padding: 0rem;
margin: 0rem;
/* background-color: transparent; */

box-sizing: border-box;
outline: solid firebrick 2px;
background-color: white;
opacity: 0.9;
}

.auth {
font-size: .9rem;
color: #404404;
}

解决思路及代码调整 #

核心问题分析 #

原有CSS的横屏媒体查询仅调整了body的边距和背景图，未针对页面内的img元素做适配逻辑，且背景图设置与页面直接展示img标签的场景冲突，导致横屏时图片无法自适应。

调整后的CSS代码 #

/* 基础样式保持 */
* {
  padding: .25rem;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 横屏适配规则 */
@media (orientation: landscape) {
  body {
    margin: .5rem;
    padding: .5rem;
  }
  /* 针对矩形高清图的适配 */
  .hero-image {
    max-width: 100vw;
    max-height: 100vh;
    object-fit: contain; /* 保留图片比例，完整适配视口 */
  }
}

p {
  color: black;
  text-align: center;
  font-family: Times, Times New Roman, serif;
  font-size: 1.0rem;
  padding: 1rem;
}

font {
  font-family: Times serif;
  text-align: center;
  height: 1.1rem;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: solid firebrick 2px;
  background-color: white;
  opacity: 0.9;
}

.auth {
  font-size: .9rem;
  color: #404404;
}

关键调整点 #

1. 给body添加弹性布局属性，确保图片在视口内居中显示
2. 横屏时给目标高清图（需添加hero-image类）设置视口级别的最大宽高，配合object-fit: contain保证图片比例不变且完整适配横屏空间
3. 移除了原规则中干扰img显示的背景图设置

页面结构配合 #

在高清图片页面的img标签上添加类名：

<img src="你的高清图地址" alt="图片描述" class="hero-image">

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