内容从 css 个网格溢出

Question

问题：我在 css 网格 column/rows 中调整图像大小时遇到问题。我基本上 object-fit: contain 图像在它们各自的单元格中。

“SPOT 4”中的图像未填充给定的 space
如果您取消注释“SPOT 1”中的图像，它将覆盖整个网格，而不局限于它自己的 css 网格单元。

我已经尝试在 video 级别和 .channel-container 级别上设置 max-width、object-fit 和其他设置，但没有成功。

背景：.parent-trapcssclass只是一个例子height/width。这会有所不同，可能是整个浏览器 window，也可能很小，所以我不能依赖任何特定的 min/max 维度。完整版中还有其他 .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

我最终需要 3 个东西，我不完全确定 min-width/height: 0 正在做什么来解决我的问题，但它有效


        .channel-layout-container {
            min-height: 0;  /* NEW */
            min-width: 0;   /* NEW; needed for Firefox */
        }

        .channel-container {
            min-height: 0;  /* NEW */
            min-width: 0;   /* NEW; needed for Firefox */
        }

        img {
            display:block;
            width :100%;
            height:100%;
            object-fit:cover;

        }

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;
    min-height: 50px;
    max-height: 50px;
    background-color: red;
}

/* contains all the .channel-container s */
.channel-layout-container {
    display: grid;
    background: #000;
    background-color: blue;
    flex: 1;
    min-height: 0;  /* NEW */
    min-width: 0;   /* NEW; needed for Firefox */
}

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

.channel-container {
    min-height: 0;  /* NEW */
    min-width: 0;   /* NEW; needed for Firefox */
}

img {
    display:block;
    width :100%;
    height:100%;
    object-fit:cover;

}

/** 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;
}

<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>

您现在可以看到，更改 .parent-trap 尺寸会保持适当的比例，控制栏始终可用，并且只是根据需要调整显示。

Answer 2

您的问题源于您的网格模板定义。

将 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 来有效地设置您所做的事情。

内容从 css 个网格溢出

content overflowing from css grid

html

css

flexbox

css-grid