内容从 CSS 网格溢出

Question

问题：我在调整 css 网格列/行内的图像大小时遇到​​问题。我本质上object-fit: contain是他们各自细胞内的图像。

1. “SPOT 4”中的图像未填充给定空间
2. 如果您取消注释“SPOT 1”中的图像，它将覆盖整个网格，并且不限于其自己的 CSS 网格单元。

我尝试过设置max-width，object-fit以及其他级别的设置，video但.channel-container没有成功。

背景：.parent-trapcss 类只是高度/宽度的示例。这会有所不同，它可能是整个浏览器窗口，也可能很小，所以我不能依赖任何特定的最小/最大尺寸。完整版本中还有其他一些.display4有时会显示一个充满整个网格的视频，并排显示一次仅显示 2 个视频等，因此任何特定尺寸也往往会破坏个体.display*

html,
body {
  border: 0;
  margin: 0;
  height: 100%;
}

.parent-trap {
  height: 540px;
  width: 960px;
}

/* container for player */
.video-player {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  min-height: 100%;
  min-width: 100%;
}

/* container for plaback control bar */
.container-controls {
  height: 50px;
  background-color: red;
}

/* contains all the .channel-container s */
.channel-layout-container {
  display: grid;
  background: #000;
  background-color: blue;
  flex: 1;
}

/****
**** FIX HERE
****/

.channel-container {}

img {}

/** THERE ARE OTHER DYNAMIC LAYOUTS, ISSUE IS SAME ON ALL */

/** display4 **/
.channel-layout-container.display4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.channel-layout-container.display4 .channel-container:nth-child(n+5) {
  flex: none;
  display: none;
}

<!-- try restricting various sizes -->
<div class="parent-trap">

  <!-- the classcommes that need to be transferred back over-->
  <div class="video-player">
    <div class="channel-layout-container display4">
      <div class="channel-container" style="background-color: khaki;">
        <!-- <img src="https://w.wallhaven.cc/full/3z/wallhaven-3zgz2y.png" />-->

      </div>
      <div class="channel-container" style="background-color: lavender;">
        SPOT 2
      </div>
      <div class="channel-container" style="background-color: lightcoral;">
        SPOT 3
      </div>
      <div class="channel-container" style="background-color: lightseagreen;">
        <img src="https://www.google.com/favicon.ico" />
      </div>
    </div>
    <div class="container-controls">
      common controls and other info goes here
    </div>
  </div>
</div>

Answer 1

您的问题是由网格模板定义引起的。

1fr 1fr用。。。来代替repeat(2, minmax(0, 1fr))。

你的问题的原因是，1fr有效的意思是minmax(auto, 1fr)。minmax这样，如果第一个参数大于第二个参数，则整个minmax表达式将被第一个参数替换，因此您的整个定义变为

grid-template-columns: auto auto;
grid-template-rows: auto auto;

设置minmax(0, 1fr)可以防止这种情况发生，并通过设置为 有效地设置您所做的min-width/-height事情0。