img 확대

🌟 이미지 사이즈 비율 맞추는 3가지 방법 (object-fit / background-size / position)

프론트를 작업할때, 컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한 경우가 있다. 예를들어 이미지를 확대/축소 하거나 특정 비율로 나타나게 하기위해, CSS를 이용하여 나 요소같은 오브젝트들을 조정해야 되는데 방법이 결코 녹록치 않다. 이번 시간에는 background-img 혹은 태그로 이미지를 가져와, 내가 원하는 사이즈의 박스 안에 이미지 컨텐츠를 배치하고 비율을 조정해 꾸밀때, 어떤 css 속성을 사용하여 다루는지 3가지 방법에 대해 한방 정리하는 시간을 가져보자. background 속성을 이용해 조절 background-size 속성 먼저 css의 background-img : url() 속성을 통해 이미지를 불러와 사용할때, 사이즈를 조절하는 방법을 알아..

인파_

2022.06.10