이미지 또는 비디오 비율(object-fit)

니나노개발생활·2021년 4월 28일
1

💡ah-ha

목록 보기
8/51
post-thumbnail

🚨 레이아웃에 비디오를 삽입하여 만들던 중 비디오 크기 조절이 되지 않아 자꾸 양쪽에 여백이 생겼다.
구글링으로 비디오 크기 조절하는 방법을 적용하여 background-color을 씌어 확인해봐도 크기는 조절되나 비디오에 여백같이? 있는 것 같았다ㅠㅠ

📍해결 > object-fit

video {
    width: 100%;
    height: 400px;
    object-fit: fill;
}

object-fit

  • fill = 비율을 무시하고 가로 세로를 크기에 맞게 꽉
  • contain = 지정한 크기에 맞게 비율을 유지한채 꽉
  • cover = 비율을 유지한채 가로와 세로가 꽉차도록 확대
  • none = 원본 크기 상관없이 가운데 정렬
  • scale-down = 원본보다 작아지며 contain과 비슷한 결과가 보여짐
profile
깃헙으로 이사중..

0개의 댓글