css 이미지 사이즈 작아지는 현상
본문
.bottom_menu_box{
justify-content: space-between;
padding: 0 15px;
}
.bottom_menu_box li{
margin: 0 auto 30px;
width: 100%;
max-width: 635px;
max-height: 150px;
overflow: hidden;
border-radius: 20px;
position: relative;
transition: .3s;
border-radius: 20px;
border:1px #ddd solid;
}
.bottom_menu_box li a{
max-width: 635px;
max-height: 150px;
position: relative;
}
.bottom_menu_box li a img{
display: block;
width: 100%;
}
.bottom_menu_box 가 <ul>입니다. 이미지사이즈는 width : 635px, height : 150px 이구요
pc에서 비율 안깨지고 정상적으로 잘 나옵니다. 그런다음 브라우저 크기를 점점 줄이다가
435px 까지 되는순간 비율은 멀쩡한데 그림이 박스 안에서 굉장히 작아져요.
박스 안에 꽉차있다가 박스는 그대로고 이미지만 반토막 사이즈로 작아집니다.
어떤걸 고쳐야할까요?ㅜㅜ
답변 1
미디어쿼리를 사용하는것도 하나의 방법입니다.
사이즈별로 css를 대응하시면 됩니다~
참고링크 (분기점 부분 참고)
https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Media_queries
감사합니다 ㅜㅜ 미디어쿼리가 답이었네요
답변을 작성하시기 전에 로그인 해주세요.
