求助：制作高度大于宽度的响应式矩形，内容居中且不随矩形旋转

嘿，这个需求用CSS就能轻松搞定，我给你整理了一套灵活的实现方案，完全满足你的所有要求：

核心特性拆解与实现 #

• 响应式高宽比（高度>宽度）
  用CSS的padding-top百分比特性来实现固定高宽比——这个百分比是基于元素宽度计算的。比如设置padding-top: 150%，就能让高度始终是宽度的1.5倍，完美满足高度大于宽度的要求，还会随容器宽度自动缩放，天生响应式。

• 内容完美居中
  给容器加上Flex布局属性，一行代码就能让内部内容在水平和垂直方向都居中，不管矩形怎么调整大小，内容位置都稳稳的。

• 轻松调整宽高
  我用CSS变量定义高宽比，你只需要修改--aspect-ratio的值就能快速调整矩形比例，比如改成2就是高度是宽度的2倍，非常方便。

• 旋转时内容同步旋转
  直接给容器添加transform: rotate(90deg)就能让矩形和内部内容一起旋转90度；如果需要其他角度，直接改度数就行。要是后续你想让旋转后内容保持正向，只需要给内容容器反向旋转相同度数就好（不过按你的需求，同步旋转用前者就足够）。

完整代码示例 #

<div class="responsive-box">
  <div class="box-content">
    我是居中的内容，旋转时我也会跟着转哦！
  </div>
</div>

/* 定义全局CSS变量，方便快速调整 */
:root {
  --aspect-ratio: 1.5; /* 高度是宽度的1.5倍，可随意修改 */
  --box-width: 80%; /* 矩形的基础宽度，响应式适配友好 */
}

.responsive-box {
  width: var(--box-width);
  margin: 20px auto; /* 让矩形在页面中居中，可选 */
  /* 用padding-top实现固定高宽比 */
  padding-top: calc(var(--aspect-ratio) * 100%);
  position: relative;
  background-color: #f0f0f0;
  border: 2px solid #333;
}

.box-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Flex布局实现内容居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px;
}

/* 旋转效果示例 - 添加这个类就能让矩形和内容一起转90度 */
.rotate-90 {
  transform: rotate(90deg);
  /* 旋转后调整原点和外边距，避免溢出页面 */
  transform-origin: center center;
  margin: calc(var(--aspect-ratio) * var(--box-width) / 2) auto;
}

使用说明 #

• 调整宽高比：修改:root里的--aspect-ratio值，比如2就是高度是宽度的2倍，1.2就是高度比宽度多20%。
• 调整基础宽度：修改--box-width的值，比如50%就是矩形占页面宽度的一半，300px就是固定宽度（响应式场景更推荐用百分比）。
• 启用旋转：给.responsive-box添加rotate-90类，就能看到矩形和内容一起旋转90度的效果。
• 移动端适配：如果需要在小屏幕调整比例，加个媒体查询就行：

@media (max-width: 768px) {
  :root {
    --aspect-ratio: 1.8; /* 移动端让高度更高一点 */
    --box-width: 95%; /* 移动端占满更多宽度 */
  }
}

这个方案非常灵活，所有参数都能快速调整，完全贴合你的需求，直接拿去用就行，有问题随时说！

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