score:2
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 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;
Source: stackoverflow.com
Related Query
- How to display elements with different sizes
- How to display a JSON with different keys in React?
- How to use React.forwardRef with TypeScript when using different html elements in the render
- How do i display different times with React/JSX?
- How can i use useParams() with an onClick button to navigate to different pages and display the data in react.js?
- Using React, how can I update multiple elements with different values?
- How to display fields from FieldArray in a different component (one component up) with redux-form
- How to display the arrays with different colors
- How do I style the elements of the same div with a different widths
- How to render component with two different states in two different elements in React?
- How to sync two dropdown lists with different display in React?
- How can i use ternary operator to display different elements in different positon Reactjs
- How to Display different value of <input type="submit" on hover with CSS within a React Component
- How to have conditional elements and keep DRY with Facebook React's JSX?
- How can I use multiple refs for an array of elements with hooks?
- How to fix 'Static HTML elements with event handlers require a role.'?
- How do you configure babel to run with different configurations in different environments
- How to use different .env files with nextjs?
- How to programmatically fill input elements built with React?
- React: How to run "react-scripts start" with a different root?
- How to surround every X elements with a class using React.js
- How to add new elements without re-rendering whole list with React
- How add style for child elements with react-jss component?
- How to use React Context with useState hook to share state from different components?
- How can I use React with Google Places API, to display place markers on a Google map?
- How to display different list of items when clicking on a category
- How to style nested elements in react with styled-components?
- How to work with two different APIs with React?
- How do I test an array of JSX elements in jest with react renderer
- How to display json data with ReactJs as table
More Query from same tag
- Calling function after Animate.spring has finished
- Dropdown list of names in ReactJS
- React suspense prevent flashing of fallback spinner
- error Cannot read property when displaying input value in reactjs
- How to remove the start script error after executing 'npm start' for Reactjs App
- Making clean double successive axios requests with React/redux
- Detect React Router Transition in ES6 Class
- ReactJS - Updating parent state when child state is changed
- How to render API data into React Frontend using functional components?
- Show 404 after Redux ajax request
- Image onError Handling in React
- useEffect re rendering all the time
- Multiple Typescript errors and I don't know how to fix them - type is not assignable, incompatibility, etc
- Different Context in different routes in React
- React router receives match params but does not update the component
- ReactJS - Changing the color of the current number of the pagination
- Updated state not rendering in child component
- React: using state in a passed callback function to a class constructor doesnt use latest version of state
- React : Save value after edit
- String formatting of column value React Table
- Transforming React State Object into correct JSON schema
- Using rxjs/ajax interceptor in React
- Very simple MWE, typescript error TS2322 (...) not assignable to type 'IntrinsicAttributes & Props & { children?: ReactNode; }'
- JS FormData sends file as application/ocet-stream, how to set it as multipart/form-data?
- How to add a label to the border of a div and make it responsive?
- Can I change class component into functional component? - Reactjs
- React: Read configurations from external file
- Object is possibly 'undefined'. TS2532
- Set Cookie with Nextjs and Vercel
- Prop is going as null in Child Component in ReactJS