슬라이더 비율에 맞춰 크기조정할때 vw

가로가 100% 잡혀있으니 

높이를 vw 로 잡으면

부모의 가로 높이 대비 비율로 창크기를 설정할수있어서 편리하다

 

 

 

  

이런 큰 비디오를 

 

.main_slider {

  border: 5px solid red;

  /* 가로대비 높이 설정 35%조정*/

  height: 35vw;

}

 

가로 대비 비율에 맞춰 35% 만 보이게 조정

 

 

---

*단 창을 줄였을떄 영상이 같이 줄어드는게 아니라서 밀려남

 

 

 

.main_slider video  {

  width: 100%;

}

 그럼  하위요소 비디오에  width:100%

높이만큼 줄어들게하자 

 

 

 그럼 비율에 맞춰 같이 줄어드는 모습

 

 

단 영상의 높이가 높기 때문에 다른 부분을 잘린다... 이부분 은 어쩔수없지만 

가운데만 보여주게 해주자

---

  height: 100%; 

 

높이를 고정해주고 

 

 

.main_slider video  {

  width: 100%;

  height: 100%;

  border: 5px solid black;

  object-fit: cover;

  /* 높이가 정해져있을때 중심기준으로 꽉 채울때 */

}

 

  object-fit: cover;  를 사용하면 가운데를 중심으로 이미지가 꽉 찬다

 

---

모바일일때 비율로 줄어들게 해주자

 

@media (max-width:1200px) {

  .main_slider {

   /* 16:9 = 100 : x * 56.25 */

   height: 56.25vw;

  }