如何显示不同大小的元素

Question

Whats up devs，所以我试图在网格中显示电影海报，但有些海报的大小不一样，在某些情况下会发生这种情况：

https://i.stack.imgur.com/0YOR8.png

我有这段代码是用 styled-components 编写的

    import styled from 'styled-components';
    
    const Container = styled.div `
       max-width: 1360px;
       padding-right: 15px;
       padding-left: 15px;
       margin-right: auto;
       margin-left: auto;
       box-sizing: border-box;
       &before,
       &:after {
           content: " ";
           display: table;
       }
       &:after {
           clear: both;
       }
    `;
    
    export const Row = styled.div`
       width: 100%;
       height: auto;
       float: left;
       box-sizing: border-box;
       &:before,
       &:after {
           content: " ";
           display: table;
       }
       &:after {
           clear:both;
       }
     
    `;
    export const Column = styled.div`
       float: left;
       padding: 10px;
       min-height: 1px;
       box-sizing: border-box;
       width: 100%;
    
       img{
           width: 70%;
       }
    
       @media only screen and (min-width: 768px) {
           width: ${(3 / 12) * 100}%
       }
    `;

    export default Container;

Answer 1

您可以将您的项目与 flexbox 对齐并调整图像的大小以自动适应您定义的大小。这里我让图像的高度和宽度适合，以防止图像变形。这会导致一些空白（当然，由于我定义的尺寸，这里夸大了，它会在你的屏幕截图中呈现为“终极复仇者联盟 2”）但它仍然比我猜的像素化图像要好。

这是an example on Stackblitz，这是代码：

js:

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => {
  return (
    <div className="container">
      <div><img src="https://picsum.photos/300/200"/></div>
      <div><img src="https://picsum.photos/200/600"/></div>
      <div><img src="https://picsum.photos/3500/2400"/></div>
      <div><img src="https://picsum.photos/200/600"/></div>
      <div><img src="https://picsum.photos/300/200"/></div>
      <div><img src="https://picsum.photos/200/600"/></div>
      <div><img src="https://picsum.photos/300/200"/></div>
      <div><img src="https://picsum.photos/200/600"/></div>
      <div><img src="https://picsum.photos/300/200"/></div>
      <div><img src="https://picsum.photos/200/600"/></div>

    </div>
  );
};

render(<App />, document.getElementById("root"));

css:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.container > *{
  margin: 5px;
  width: 150px;
  height: 200px;
  border: 1px solid black;
  text-align: center;
}

img{
  width:auto;
  height: auto;
  max-width: 150px;
  max-height: 200px
}

请注意，我在这里不使用网格/列/行，因为 flexbox 已经按照您的意愿显示它。它更简单。

Answer 2

所以在Quentin Grisel的帮助下，我稍微修改了他给出的代码，我可以得到解决方案。

更改：我在图像上设置了固定值，将 justify-content 更改为 flex-start。

最终结果：

最终代码：

    const Container = styled.div `
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  .container > *{
    width: 150px;
    height: 200px;
    border: 1px solid #6b6b6b;
    text-align: center;
  }

    img{
        flex:1;
        width: 165px;
        height: 220px;
        margin: 10px;

      }
  }

`;


export default Container;