한 줄에 이미지 두 개씩 나와야 하는데 높이 달라서 2개 1개 이런식으로 나오는 문제 해결 (object-fit, aspect-ratio 사용)

# 문제 

이미지가 한 줄에 두개 씩 나와야 하는데 이미지 마다 크기가 달라서 그런지 2개 1개 이렇게 나오는 문제가 발생함

 

# 구조

구조는 ul li 안에 각각의 img가 있는 상태였음

 

# 해결

각 img에 아래 코드 적용되도록 하였음 

img {
  width: 100%;
  aspect-ratio: 1 / 1; /* 정사각형 비율로 고정 */
  object-fit: cover; /* 잘라도 좋으니 꽉 채워서 보여줌 */
}