时间戳

首页 > 解决方案 > 如何显示不同大小的元素

css - 如何显示不同大小的元素

问题描述

开发人员怎么了，所以我试图在网格中显示电影海报，但有些海报的大小不同，在某些情况下会发生这种情况：

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

我有我用样式组件制作的这段代码

    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;

标签： cssreactjsstyled-components

解决方案

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

这是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 已经按照您的意愿显示它。它更简单。

推荐阅读