[CSS] 이미지 정사각형 유지하는 방법

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^5.1.6"

---

😢 내가 겪은 문제

나는 NextJS 에서 개발을 하고 있는데, 이미지를 첨부하고 나면 기존의 틀과 이미지의 크기가 달라져서 버튼의 위치가 달라지거나

뭔가 화면의 요소들이 왔다갔다 하는 경우가 있었다. 내가 보기에도 너무 불편한데 당연히 지적당하겠다는 생각에 먼저 수정하기로 했다.

코드만 봐도 간단하게 이해할정도로 쉽지만, 이미지 URL 이 있으면 <img />를 보여주고 없으면 RectangleSVG 를 보여준다.

RectangleSVG 같은 경우에는 다음과 같다.

width="100%" maxWidth="430px" height="100%" maxHeight="430px"

정사각형 모양이다 보니 똑같이 맞춰주기 위해서

부모 클래스에 position relative 추가 및 paddingBottom 100% 추가

&

자식 클래스는 position absolute 추가 및 top 0 left 0 추가 해주면 된다.

 <Col
  style={{
    position: "relative",
    paddingBottom: fileURL === "" ? "0" : "100%",
  }}
>
    {fileURL ? (
        <img
          src={fileURL}
          style={{
            width: "100%",
            height: "100%",
            position: "absolute",
            objectFit: "cover",
            top: "0",
            left: "0",
          }}
          alt="Image"
        />
    ) : (
        <RectangleSVG />
    )}
</Col>

아무래도 코드는 NextJS 에서 짠 코드이다 보니 카멜형식으로 작성되어있다. 그래서 이상해보일 수 있는데

objectFit: "cover" 를 object-fit: cover;

수정하는건 위의 코드처럼 수정하면 되는 간단한 문제라서 쉽게 옮겨 작성할 수 있을 것이다.

계속 자동으로 비율이 조정되다보니, 너무 답답한 상황이였는데, 이제는 정사각형 모양으로 SVG 파일과 동일한 크기다 보니

문제 없이 잘 작동된다. 만족스러운 결과라고 할 수 있다 !!