时间戳

首页 > 解决方案 > 保持纵横比，同时保持流体容器 100% 的宽度

html - 保持纵横比，同时保持流体容器 100% 的宽度

问题描述

对于以下项目，我想设置如下样式：

  1. parentContainer- 宽度 100vw 和高度 100vh；所有项目都必须适合容器（即没有滚动条）
  2. searchBar- 在顶部；宽度为 100vw，高度取决于内容
  3. bottomContainer- 占用未消耗的剩余空间searchBar
  4. videoContainer- 包含一个视频元素和一个标题；两个项目都必须适合整个高度，bottomContainer但视频元素必须保持16:9纵横比；所有剩余的宽度应由sidebarContainer
  5. video- 最初不会提供源，但必须保持纵横比16:9；
  6. sidebarContainer- 一些随机内容minWidth: 150px（在较小的屏幕上会消失）；将占用 videoContainer 未使用的剩余宽度；

我能够满足大多数要求，但videoContainer/ video。如果我修复比率问题，则video元素太小。如果我修复了video元素大小，则不会保持纵横比或videoContainer不适合视口（即通常它会超出极宽屏幕上的高度）。

示例： https ://codesandbox.io/s/video-css-structure-dfc2q?file=/src/App.js

标签： htmlcssreactjshtml5-video

解决方案

如果侧边栏只是智能手机上的问题，则将 css 中的 parentContainer、rowContainer、sidebarContainer 和 videoContainer 更改为下面的 css。

在小屏幕上，左右列将堆叠，这意味着在小屏幕上，视频位于侧边栏的顶部。

/* overflow temporary commented for testing */
.parentContainer {
  height: 100%;
  /* overflow: hidden; */
}
/* wrap columns if total width > 100% */
.rowContainer {
  display: flex;
  flex-wrap: wrap;
}
/* small screens */
.sidebarContainer,
.videoContainer {
  flex: 0 0 100%;
  width: 100%;
}
/* medium and large screens */
@media (min-width: 992px) {
  .sidebarContainer {
    flex: 0 0 25%;
    width: 25%;
  }
  .videoContainer {
    flex: 0 0 75%;
    width: 75%;
  }
}

推荐阅读