반응형 관련 문의 드립니다.
본문
안녕하세요 반응형으로 스킨을 제작중에 있습니다.
반응형이 아닐때는 정상적으로 출력이 잘됩니다.
문제는 반응형 해상도 480px일때 등록된 이미지가 있을때 비율에 맞게 이미지는 출력이 되는데 백그라운드에 이미지가 없을때 출력되는 기본이미지도 같이 출력이 되고, 등록된 이미지가 없을때에는 기본이미지가 출력은 되는데 비율에 맞지 않고 길게 출력이 됩니다.
아래는 참고 이미지 입니다.
코드는 아래와 같이 작성했습니다.
<div class="top_info">
<div class="landImg swiper-container">
<ul class="swiper-wrapper">
<?php
$sql = "SELECT bf_file FROM g6_board_file WHERE bo_table = '$bo_table' AND wr_id = '$wr_id'";
$result = sql_query($sql);
while ($file_row = sql_fetch_array($result)) {
$image_path = G5_URL.'/data/file/'.$bo_table.'/' . $file_row['bf_file'];
$alt = 'Image'; // 대체 텍스트 설정
echo '<li class="swiper-slide">';
echo '<div class="img">';
echo '<img src="' . $image_path . '" alt="' . $alt . '" width="462" height="302">';
if ($row['wr_14']) {
echo '<div class="sold"></div>';
}
echo '</div>';
echo '</li>';
}
?>
<!-- 이미지가 없는 경우 기본 이미지 출력 -->
<?php if (sql_num_rows($result) == 0): ?>
<li class="swiper-slide">
<div class="img">
<img width="462" height="302">
</div>
</li>
<?php endif; ?>
</ul>
이하생략 .....
일부 CSS는 아래와 같습니다.
/* 이미지 + 타이틀 */
#landView .swiper-button-next:after, #landView .swiper-button-prev:after{font-size:24px;color:#fff}
#landView .top_info{display:flex;padding-right:35px}
#landView .top_info > div{width:48%}
#landView .top_info .landImg{position:relative;overflow:hidden;z-index:1}
#landView .top_info .landImg ul li{overflow:hidden}
#landView .top_info .landImg ul li.null{height:300px;text-align:center;font-size:18px;line-height:300px;background:#eee}
#landView .top_info .landImg ul li img{width:100%}
#landView .top_info .landImg .pager{display:inline-block;position:absolute;top:20px;left:auto;right:20px;bottom:auto;z-index:2;width:60px;height:26px;border-radius:30px;font-size:11px;text-align:center;color:rgba(255,255,255,.5);letter-spacing:1px;line-height:27px;background:rgba(0,0,0,.5)}
#landView .top_info .landImg .pager span:first-child{font-size:11px;color:#fff}
#landView .top_info .landImg .img{overflow:hidden;position:relative;height:302px;background:center no-repeat;background-image:url(./img/no_img.jpg);background-size:cover;}
#landView .top_info .landImg .sold{position:absolute;left:0;top:0;z-index:5;width:100%;height:100%;background:url(./img/sold.png) center no-repeat rgba(255,255,255,.6);background-size:45%}
@media (max-width: 480px) {
.popcommon {font-size: 14px;display: flex;justify-content: center;align-items: center;}
#landView > .inner {top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 20px;width: 100%;height: calc(100% - 160px);border-radius: 20px 20px 0 0;}
#landView.fix_pg {top: 0;right: 0;width: 100%;height: 100%;border-right: none;}
#landView.fix_pg > .inner {top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;height: calc(100% - 160px);padding: 20px;border-radius: 20px 20px 0 0;}
#landView .top_info .tit .price {font-size: 16px;}
#landView .top_info .tit .price span {width: 24px;height: 24px;margin-right: 6px;font-size: 12px;line-height: 24px;}
#landView .info_list ul + ul {margin-top: 0px;margin-left: 0px;}
.content img {max-width: 100%;height: auto;}
.swiper-slide img {width: 100%;height: auto;}
}
어디에 문제가 있는걸까요? 고수님들의 조언 및 해결방법 부탁드리겠습니다.
즐거운 주말 되세요~
답변 4
#landView .top_info .landImg .img{overflow:hidden;position:relative;height:302px;background:center no-repeat;background-image:url(./img/no_img.jpg);background-size:cover;}
에서 해당 현상이 발생되는것 같습니다.
이미지가 없을때 출력되는 기본이미지 : background-image:url(./img/no_img.jpg);
비율에 맞지 않고 길게 출력 : height:302px;
미디어 쿼리에서 재정의 하는등의 작업이 필요하지 않을까 싶습니다.
@배르만 안녕하세요~ 답변감사드립니다. 죄송하지만 구체적으로 어떻게 수정을 하면 좋을지 알려주실 수 있으실까요?
각각 다음처럼 시도해볼수 있을것 같습니다.
비율에 맞지 않고 길게 출력
#landView .top_info .landImg .img{overflow:hidden;position:relative;background:center no-repeat;
height:100%;
background-image:url(./img/no_img.jpg);
background-size:contain;
}
이미지가 없을때 출력되는 기본이미지 (Firefox 제외)
#landView .top_info .landImg .img:has(img[src]) {
background-image: none;
}
@배르만 안녕하세요~ 알려주신데로 적용을 하니 잘 적용되었습니다.
기본이미지를 비율에 맞게 넣으셨나요?
반응형으로 하실때 이미지 width가 100%가 되면서 height가 자동으로 바뀌면서 생기는 문제 같습니다.
기본이미지가 비율에 맞으면 문제가 없어질듯 합니다.
@Mins아빠 안녕하세요~ 답변 감사합니다. 등록이미지와 기본이미지의 사이즈는 768px x 502px 둘다 같습니다. 반응형이 아닐때는 등록이미지가 있을때는 등록이미지만 출력, 등록이미지가 없을때는 기본이미지만 출력은 잘 적용됩니다. 반응형 일때는 위의 이미지 처럼 됩니다.ㅠㅠ 어떻게 수정을 해야 할까요?
둘다 같으면 말씀하신 문제가 보통 안 생기는데요?
페이지 url을 적어 주시면 확인을 해보겠습니다.
쪽지로 문의 드렸습니다.
이미지가 있으시던 없으시던 swiper-slide 생성하셔서 그러신데 sql_num_rows($result) 값이 0 일때만 li 를 생성하도록 코드 수정하시면 되실듯해요
그리고 이미지에 src 도 없으신데 img 클라스 사용하시고 싶으시면 이렇게 하시구요
<?php if (sql_num_rows($result) == 0): ?>
<li class="swiper-slide">
<div class="img">
<img src="./img/no_img.jpg" width="462" height="302">
</div>
</li>
<?php endif; ?>
이렇게 하시면 해결되실꺼에요
@액트온 안녕하세요! 답변 감사합니다. 질문 내용에
<?php if (sql_num_rows($result) == 0): ?>
<li class="swiper-slide">
<div class="img"> 이부분은 이미 적용이 되어 있습니다. 또한 이미지는 css에 경로를 지정해 놔서 이미지 경로를 작성하지 않았던 부분입니다. 알려주신대로 이미지 경로를 넣어도 같은 증상입니다.. ㅠㅠ