score:2

Accepted answer

you could align your items with flexbox and adjust the size of your image to automatically fit your defined size. here i make the image fit in height and width to prevent the image to be deformed. this lead to some white spaces (exagerated here due to the size i defined of course, it will render as "ultimate avengers 2" in your screenshot) but it's still better than pixelized images i guess.

here is an example on stackblitz and here is the code :

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
}

note that i don't use grid/column/row here since flexbox already display it as you want it to be. it's way simplier.

score:0

so with the help of quentin grisel, i modified the code he gave a little bit and i can get the solution.

changes: i put fix values on the images, change the justify-content to flex-start.

the final result: search screen

the final code:

    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;

Related Query

More Query from same tag