html - CSS-Grid -OR- Reactjs 破坏了 Object-fit:contain？

Question

我正在使用 CSS Grid 来构建图像库模式。可点击的缩略图将调用较大的“主视图”容器中的图像。问题是，无论我尝试什么，图像要么：1）溢出其容器并将缩略图库推出模式或2）充当封面大小的图像，将所有图像裁剪为相同的尺寸。

我需要做的是，所有图像（人像或风景）在显示时都包含在网格区域内，以便整个图像可用。

我是用 React 写的，所以我也想知道这方面是否存在冲突。

到目前为止，没有什么可以将图像包含在特色 img 窗口中。这是我尝试过的： 1. widthand max-heightORmax-width:和height 2. object-fit: containand的组合object-fit: scale-down。我实际上已经尝试了许多其他版本，看看它是否有任何不同，它实际上对输出没有影响。3. 将<img>标签设置在 div 包装器内，并将该 div 限制为网格区域容器的大小 4. 使<img>自身成为适合网格区域的网格项。

.grid_container--modal {
  /* notice the short height is not being kept. */
  height: 100px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(25px,1fr));
  grid-template-rows: 1fr 6fr 2fr;
  grid-gap: 3px;
  grid-template-areas:
    "h h h h h h"
    "i i i i c c"
    "g g g g c c";
}

.modal-header {
  grid-area: h;
  background: dodgerblue;
}

.modal-feature {
  /* i is for "image" */
  grid-area: i;
  height: 100%;
}

.modal-feature-img {
  /* with explicit measures this only sort of works.*/
  max-width: 100%;
}

.modal-info {
  grid-area: c;
  background: tomato;
 }
 

.modal-gallery {
  grid-area: g;
  background: mediumseagreen;
 }
 
 .thumbnail {
	max-width: 50px;
	height: auto;
	margin: 0 5px;
	padding: 3px;
	border: 1px solid #ccc;
}

<div class='grid_container--modal'>
  <div class="modal-header">
    <h1>header content</h1>
  </div>
  
  <!-- HERE'S WHERE THE PROBLEM LIES -->
  <div class="modal-feature">
    <img class='modal-feature-img' src='https://placeimg.com/640/480/any' />
  </div>
  
  <div class="modal-info">
  Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.
  </div>
  <div class="modal-gallery">
    <img class="thumbnail" src="https://via.placeholder.com/300.png/eee/333">
  </div>
</div>

截至目前，这就像一个封面背景或喜欢object-fit: cover并裁剪我的图像，但（至少）不会溢出容器并将其他东西推出。我需要它不裁剪图像并将它们包含在网格区域内。

标签： htmlcssreactjscss-grid

Answer 1

我不完全确定您到底想要什么作为输出。但我认为你也应该object-contain在特色 img 上使用。我将总高度从 100 像素更改为 300 像素，因为总网格高度为 100 像素，特色图像根本没有空间。

.grid_container--modal {
  height: 300px;
  display: grid;
  grid-template-columns: repeat(6, minmax(25px, 1fr));
  grid-template-rows: 1fr 6fr 2fr;
  grid-gap: 3px;
  grid-template-areas: "h h h h h h" "i i i i c c" "g g g g c c";
}

.modal-header {
  grid-area: h;
  background: dodgerblue;
}

.modal-feature {
  /* i is for "image" */
  grid-area: i;
  min-height: 0;
}

.modal-feature-img {
  /* use 100% to stretch to fit parent */
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.modal-info {
  grid-area: c;
  background: tomato;
}

.modal-gallery {
  grid-area: g;
  background: mediumseagreen;
}

.thumbnail {
  max-width: 50px;
  margin: 5px;
  padding: 3px;
  border: 1px solid #ccc;
}

<div class='grid_container--modal'>
  <div class="modal-header">
    <h1>header content</h1>
  </div>

  <!-- HERE'S WHERE THE PROBLEM LIES -->
  <div class="modal-feature">
    <img class='modal-feature-img' src='https://placeimg.com/640/480/any' />
  </div>

  <div class="modal-info">
    Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis.
  </div>
  <div class="modal-gallery">
    <img class='thumbnail' src='https://placeimg.com/640/480/animals' />
    <img class='thumbnail' src='https://placeimg.com/640/480/people' />
    <img class='thumbnail' src='https://placeimg.com/640/480/tech' />
    <img class='thumbnail' src='https://placeimg.com/640/480/architecture' />

  </div>
</div>