Genie of the Lamp 😶‍🌫️ Genie of the Lamp 😶‍🌫️

background-image cover

• [CSS] 이미지를 컨테이너에 맞게 사이즈 통일하는 방법 (object-fit, background ..)

  Coding 2023. 7. 12. 19:28

  Intro 보여주고 싶은 이미지 사이즈는 정해져 있는데, 올라오는 이미지 사이즈는 제각각인 경우가 많습니다. 사용해 본 이미지 정렬방법을 정리해 봤습니다. 1. background-size 사용 제 기준에서 제일 간단한 방법입니다. 꼭 img 태그를 사용해야 하는 경우가 아니라면, 여러 브라우저 대응에도 문제없이 사용가능한 방법입니다. 이미지는 비율을 유지하고 컨테이너에 맞게 이미지를 꽉채운 후 넘치는 부분은 잘라냅니다. 넘치는 이미지의 상하좌우를 균일하게 잘라내고 이미지의 가운데 부분만 보이게 하고싶다면, background-position: center center; 위 속성을 꼭 넣어야합니다. 2. image에 position: absolute 사용 bootstrap에서 ratio helper와 ..

  Read More