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

Question

我希望它们都适合有边框的盒子内，但我不希望它们看起来被拉伸(stretch)。我该怎么做？

我尝试在 div 内给它们固定的高度、宽度等，但它们看起来总是不太正确

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

我的样式组件是:

export const Container = styled.div`
  display: flex;
  width: 1000px;
`;

export const CategoryContainer = styled.div`
  height: 300px;
  width: 33%;
  margin-right: 10px;
  position: relative;
  border: 1px solid black;
`;

export const CategoryLink = styled(Link)`
  text-decoration: none;
  color: black;
  z-index: 5;
  position: absolute;
`;

export const CategoryImage = styled.div`
`

export const CategoryName = styled.div`

`

Answer 1

一个相当简单的想法是保持宽度相对于高度。一般来说，大多数响应式图像的高度是通过设置 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;
}

一个实例:

http://jsbin.com/vuduvev/edit?css,output