안녕하세요 한가지 여쭤 보려고 합니다.
본문
안녕하세요
서브 페이지에 상단에 이미지가 화면이 줄여지면 상단 이미지가 너무 많이 줄여져서요
혹시 왜 그러는 것인지 궁금 ㅎ바니다.
http://www.jisim.or.kr/theme/basic3/page/company_1.php
죄송합니다.
실력이 별로 없어서요
답변 2
.box_sub_slider img {
height: 100%;
}
@media all and (max-width: 991px) {
.box_sub_slider img {
height: auto;
}
}
안녕하세요. 인아이디어입니다.
해당 이미지의 높이값이 지정되어있지 않아서, 가로 크기에 비해서 세로 크기가 자동으로 조절되는 현상입니다.
(반응형에서 많이 쓰는 방식입니다.)
해당 클래스의 이미지는 전체적으로 높이를 조절 해주시는 편이 좋습니다.
테스트해보니 이미지를 교체하시는 편도 좋은 방법인것같습니다.
가로 크기에 비해서 세로 크기가 너무 어중간합니다.
아니시면 img 태그를 지우시고, .box_sub_slider 에 background로 주시면 이미지 깨짐 현상을 없앨 수 있습니다
(단지 이미지가 좌우가 약간씩 잘려서 나올 수 있습니다.)
.box_sub_slider {
background: url(http://www.jisim.or.kr/theme/basic3/img/sub_img.png) no-repeat center center;
background-size : cover;
width: 100%;
height: 172px;
}
이런식으로 하셔도 될것같습니다.
개인적으로는 background 방식을 추천합니다.
1. 딱히 빠진 부분은 없습니다.
2. 이렇게 하시면 될것같습니다.
<style>
.box_sub_slider {
background-size : cover;
width: 100%;
height: 172px;
}
</style>
<div class="box_sub_slider" id="nav01" style="background:url(<?=$sub_title_img?>) no-repeat center center; ></div>
3. 채택 부탁드립니다 :)