Javascript 如何使所有图像适合相同大小的div

我希望它们都能放在有边框的盒子里，但我不希望它们看起来像是被拉伸了。我该怎么做

我试着给他们一个固定的高度，在一个div内的宽度等，但他们总是看起来不太正确

<CategoryContainer>
    <CategoryLink to={`${category.name.toLowerCase()}`}>
        <CategoryImage>
            <Image image={category.products[0].image} />
        </CategoryImage>
        <CategoryName>
            {`${category.name}`}
        </CategoryName>
    </CategoryLink>
</CategoryContainer>

---

如果将图像设置为背景是一个选项：

---

如果没有，请使用对象拟合：

一个相当简单的方法是保持宽度相对于高度。通常，大多数响应图像的高度由其宽度控制，通过设置

height:auto

和

width:100%

，我们可以将其反转，因为在您的情况下，高度是可变的

.the-images {
  /* This is where magic happens */
  max-width: 100%;
  height: 100%;
  width: auto;

  display: block;
  margin: 0 auto;
}

或者，如果长方体的宽度为流体，则可以执行此操作以保持纵横比

.the-images {

  /* This is where magic happens */
  max-width: 100%;
  max-height: 100%;
  width: auto;

  display: block;
  margin: 0 auto;
}

一个活生生的例子：

---

请包括呈现的HTML和CSS…

最大高度：100%；最大宽度：100%

应该适用于大多数浏览器，我记得可能会在某些地方导致兼容性问题（我认为是safari），但这是几年前的事了，现在可能已经解决了。不过，您不需要设置明确的高度或宽度，因为这将导致其倾斜。只有两个

max

属性，没有其他内容。@jmcgriz

max width:100%；最大高度：100%；宽度：自动就足够了。@DeepakKamat但是我应该把这些应用到上面的哪个组件上呢？图像，
img
标签放在你放它们的容器里。
.the-images {

  /* This is where magic happens */
  max-width: 100%;
  max-height: 100%;
  width: auto;

  display: block;
  margin: 0 auto;
}