CSS-Grid -或- Reactjs破坏对象-适合:包含？

Question

我正在使用CSS网格来建立一个图片库模式。可点击的缩略图将调用较大的“主视图”容器中的图像。问题是，无论我如何尝试，图像要么是: 1)溢出它的容器并将缩略图库从模式中推开；2)充当覆盖大小的图像，将所有图像裁剪到相同的维度。

我需要发生的是，所有的图像-肖像或景观-包含在栅格区域时，当功能，以便整个图像是可用的。

我写这篇文章是为了回应，所以我也想知道在这方面是否有冲突。

到目前为止，还没有任何东西能够将图像包含在特色的img窗口中。下面是我尝试过的: 1. width和max-height或max-width:和height 2的组合。object-fit: contain和object-fit: scale-down。实际上，我已经尝试过许多其他版本，看看它是否有任何不同，而且它实际上对输出没有任何影响。3.在div包装器中设置<img>标记，并将该div约束为网格区域容器的大小。使<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和剪切我的图像，但(至少)没有溢出容器和推出其他东西。我需要它不裁剪图像和他们包含在网格区域。

Answer 1

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

​

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

​