如何获得适合网格单元大小的图像? [英] How can I get an image to fit to the size of a grid cell?

问题描述

我想将图像放置在单元格中，以便图像的大小由单元格的大小决定，而不是相反.我尝试过这种方式:

I want to place an image in a cell such that the size of the image is dictated by the size of the cell and not the other way around. I have tried doing it this way:

.app-container {
  width: 100vw;
  height: 100vh;
}

.info {
  display: grid;
  min-height: 0;
}

.image-box {
  display: grid;
  min-height: 0;
}

img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  grid-row: 1;
  grid-column: 1;
}

<div class="app-container">
  <div class="info">
    <div class="image-box" style="grid-row-start: 1; grid-column-start: 1;">
      <img src="https://images.unsplash.com/photo-1482003297000-b7663a1673f1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
    </div>
  </div>
</div>

但是图像始终以其原始大小显示，并且不会缩放.我想念什么?有关JSFiddle的完整示例，请此处

But the image is always displayed in its original size and does not get scaled. What am I missing? Full example on JSFiddle here

推荐答案

在Grid和Flex布局中，图像非常棘手.我不确定是否是因为Grid和Flex是新技术，并且浏览器尚未完全将它们适应于长期存在的< img> 标签.也许这是另外一回事.但最重要的是:它糟透了CSS3技术中的图像处理.在测试每个主流浏览器中的每个排列时，您必须尝试不同的方法，因为不能保证一致性.

Images are ridiculously tricky in Grid and Flex layouts. I'm not sure if it's because Grid and Flex are new technologies and browsers haven't yet fully adapted them to the long-standing <img> tag. Or maybe it's something else. But bottom line: it sucks dealing with images in CSS3 technologies. You have to try different things, while testing each permutation in every major browser, because there's no guarantee of consistency.

多年来我学到的一件事有很大帮助，那就是永远不要将图像变成网格或弹性项目.换句话说，永远不要使图像成为容器的子级.给图像提供自己的容器，使该元素成为项目.一旦采取这一行动，很多事情就会趋于固定.

One thing I've learned over the years that helps a lot is to never make an image a grid or flex item. In other words, never make the image the child of the container. Give the image it's own container, making that element the item. Once you make that move, a lot of things tend to fall into place.

这是您代码的修订版(HTML不变):

Here is a revised version of your code (with no changes to the HTML):

在Chrome，Firefox和Edge中进行了测试.

.image-box {
  height: 50vh;
  border: 2px solid red;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: 
    " demo1 image demo2 "
    " demo1 image demo2 "
    " demo1 image demo2 ";
}

.image-box > div:first-child {
  grid-area: demo1;
  background-color: lightgreen;
}

.image-box > div:nth-child(2) {
  grid-area: image;
  min-width: 0;
}

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

.image-box > div:last-child {
  grid-area: demo2;
  background-color: aqua;
}

.app-container {}
.info {}

<div class="app-container">
  <div class="info">
    <div class="image-box">
      <div>demo item 1</div>
      <div><img src="https://images.unsplash.com/photo-1482003297000-b7663a1673f1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ">
      </div>
      <div>demo item 2</div>
    </div>
  </div>
</div>

这篇关于如何获得适合网格单元大小的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！