jQuery/jQuery 슬라이더
슬라이더 비율에 맞춰 크기조정할때 vw
hyojinny
2022. 12. 9. 12:41
가로가 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;
}