안녕하세요 한가지 여쭤 보려고 합니다.
본문
안녕하세요
서브 페이지에 상단에 이미지가 화면이 줄여지면 상단 이미지가 너무 많이 줄여져서요
혹시 왜 그러는 것인지 궁금 ㅎ바니다.
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 방식을 추천합니다.
네 감사 합니다.
background-size : cover; 이부분에 앞에 혹시 .이 빠진건지요
궁금 합니다.
아 그리고
switch($pn) {
case "company_1":
$sub_title1="대표이사 인사말"; $step1="조합소개"; $step2="대표이사 인사말";
$sub_title_img = G5_THEME_URL . '/img/sub_img.png';
break;
이것을 사용을 하고 있습니다.
이것은 이미지 경로 지정 해 놓으면 그냥 나오게 되는 것이지요
지금 서브 페이지 상단 이미지 같은 경우에는 아래와 같이 코딩을 했습니다.
<div class="box_sub_slider" id="nav01"><p><img src="<?=$sub_title_img?>" alt=""></p></div>
그런데 위 소스를 여기에 대입을 하려고 하면 어떻게 해야 하는지 궁금 합니다.
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. 채택 부탁드립니다 :)
덕분에 잘 해결을 하였습니다.
감사 드립니다.
혹시여 매인 베너 같은 경우에는 어떻게 처리 하나요
화면이 줄여 졌을때 이미지가 이상하게 나오는 상태라서요
http://www.jisim.or.kr/index,php
죄송합니다.
