CSS3_object-fit 과 object-position

object-fit & object-position

백그라운드 이미지로 img를 넣으면
원본 이미지와 다르게 이미지 크기/비율이 설정되면
찐따처럼 보임 => 가로가 긴 이미지를 정사각형으로 넣을 때 등

예1)

CSS3에서 object-fit 과 object-position으로 img 요소로 사용해서
이미지 비율 지킬 수 있음!

---

div에 각각 background와 img태그로 넣었을 때

2번째 이미지의 경우(img태그 사용) =>
object-fit 과 object-position 적용해주기

---

object-fit 적용

1.부모요소 & 이미지요소에 width와 height 존재해야함
width:inherit;
height:inherit;
2.object-fit:cover;

적용후

---

object-position 적용

(left/center/right 가능)
백그라운드를 이미지를 왼쪽로 좀 보내서 쏠림 조절해주기
왼쪽을 기준으로 이미지가 위치함(이거 설정 안하면 가운데 기준임)
object-position:left;

---

예2)
엄청나게 큰 이미지의 경우

width:inherit;
height:inherit;
object-fit:cover;
(object-position:center;이건 default 라 따로 안적어줘도 오케이)

적용 후

---

코드관리 & 이미지 관리 쉬운 방법이니 must apply!