간단하지만 과거의 나는 왜 어려워 했는 가.

css의 object-fit: cover를 사용하면 된다.

codesandbox 예시

code 예시

import "./styles.css";
import styled from "styled-components";

import example1 from "./img/example1.gif";
import example2 from "./img/example2.jpeg";
import example3 from "./img/example3.jpeg";

export default function App() {
  return (
    <AppStyle>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <img src={example1} alt="nct" />
      <div className="imgWrapper">
        <img src={example1} alt="nct" />
      </div>
      <img src={example2} alt="nct" />
      <div className="imgWrapper">
        <img src={example2} alt="nct" />
      </div>
      <img src={example3} alt="nct" />
      <div className="imgWrapper">
        <img src={example3} alt="nct" />
      </div>
    </AppStyle>
  );
}

const AppStyle = styled.div`
  .imgWrapper {
    img {
      width: 200px;
      height: 200px;
      object-fit: cover;
    }
  }
`;