모바일 슬라이드 배너css 질문드립니다.
본문
width 값은 고정되어있고
576px 아래일때
메인배너 height 0 auto라서 너무 줄어들어 잘 보이지 않습니다.
그래서 height: 300px 로 고정해놨는데
당연히 이미지가 세로로 늘어나서 보기흉한 상황입니다.
@media (max-width:576px) {
img {
max-width: 100%;
display: block;
height:: 300px;
}
}
이미지를 늘리지 않고 height:300px 을 맞출 수 있는 방법이 있을까요?
답변 1
비율대로 늘리실려면 object-fit:cover; 속성을 주시면 됩니다.
height가 고정값이고 width 값은 변동값이기 때문에 당연히 비율에서 넘쳐나는 부분은 짤리게됩니다.
답변을 작성하시기 전에 로그인 해주세요.