모바일 배너잘림
본문
모바일 이미지 잘림 문의 드립니다.
메이크샵 사용중인데 그냥 pc버전 사용중일땐
확인해줄수 없다고 답변 받아서요..
px조절도 해보고 했는데 잘 안되네요..
도움요청드립니다.
<link type="text/css" rel="stylesheet" href="/design/bike1/10173/moms/css/swiper.min.css" />
<!--/script_scroll(1)/-->
<div id="wrap">
<!--/include_header(1)/-->
<!--/script_banner1/-->
<div id="contentWrap">
<div class="swiper-container">
<div class="swiper-wrapper">
</div>
<div class="swiper-pagination" style="display: none;"></div>
</div>
<div class="small-banner-container">
<ul class="clearfix">
<li class="float-l"><a href="/shop/shopdetail.html?branduid=148298&xcode=006&mcode=002&scode=&special=3&GfDT=bmp6W10%3D"><img src="/design/bike1/10173/moms/images/common/small_banner_01_new.jpg" alt="특별상품" /></a></li>
<li class="float-r"><a href="/shop/shopdetail.html?branduid=147838&xcode=006&mcode=002&scode=&special=3&GfDT=aWx3Ug%3D%3D"><img src="/design/bike1/10173/moms/images/common/small_banner_02_new.jpg" alt="킴코UTV" /></a></li>
</ul>
</div>
<div class="items-wrap add1-items">
<h2 class="tit-prd">
<img src="/design/bike1/10173/moms/images/common/main_best_item_tit.gif" alt="Best of Best" />
</h2>
<div class="item-list">
<table summary="상품이미지, 상품 설명, 가격">
<caption>Best of Best</caption>
<colgroup>
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
</colgroup>
<tbody>
<tr>
<!--/loop_add1_product(10)/-->
<td>
<dl class="item">
<dt class="thumb"><a href="<!--/add1_product@name/-->" /></a></dt>
<dd class="infos">
<p class="item-name"><!--/add1_product@name/--></p>
<!--/if_add1_product@is_soldout/-->
<p class="item-price"><font color="#FF0000">[품절]</font></p>
<!--/else/-->
<p class="item-price">
<!--/if_add1_product@price_consumer(+1)/-->
<span class="price-strike">\<!--/number/add1_product@price_consumer/--></span>
<span class="price-red">\<!--/number/add1_product@price_sell/--></span>
<!--/else/-->
<span>\<!--/number/add1_product@price_sell/--></span>
<!--/end_if/-->
</p>
<!--/end_if/-->
<!--/if_add1_product@link_preview/-->
<p class="closeup">
<a href="<!--/add1_product@link_preview/-->" class="btn-overlay-show"><img src="/design/bike1/10173/moms/images/common/item_previe_ico.gif" alt="미리보기" /></a>
</p>
<!--/end_if/-->
</dd>
</dl>
</td>
<!--/if_step(5)/-->
</tr><tr>
<!--/end_if/-->
<!--/end_loop/-->
</tr>
</tbody>
</table>
</div>
</div><!-- .add1-items -->
<div class="items-wrap new-items">
<h2 class="tit-prd">
<img src="/design/bike1/10173/moms/images/common/main_new_item_tit.gif" alt="New Arrivals" />
</h2>
<div class="item-list">
<table summary="상품이미지, 상품 설명, 가격">
<caption>New Arrivals</caption>
<colgroup>
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
</colgroup>
<tbody>
<tr>
<!--/loop_new_product(20)/-->
<td>
<dl class="item">
<dt class="thumb"><a href="<!--/new_product@name/-->" /></a></dt>
<dd class="infos">
<p class="item-name"><!--/new_product@name/--></p>
<!--/if_new_product@is_soldout/-->
<p class="item-price"><font color="#FF0000">[품절]</font></p>
<!--/else/-->
<p class="item-price">
<!--/if_new_product@price_consumer(+1)/-->
<span class="price-strike">\<!--/number/new_product@price_consumer/--></span>
<span class="price-red">\<!--/number/new_product@price_sell/--></span>
<!--/else/-->
<span>\<!--/number/new_product@price_sell/--></span>
<!--/end_if/-->
</p>
<!--/end_if/-->
<!--/if_new_product@link_preview/-->
<p class="closeup">
<a href="<!--/new_product@link_preview/-->" class="btn-overlay-show"><img src="/design/bike1/10173/moms/images/common/item_previe_ico.gif" alt="미리보기" /></a>
</p>
<!--/end_if/-->
</dd>
</dl>
</td>
<!--/if_step(5)/-->
</tr><tr>
<!--/end_if/-->
<!--/end_loop/-->
</tr>
</tbody>
</table>
</div>
</div><!-- .new-items -->
<div class="items-wrap md-items">
<h2 class="tit-prd">
<img src="/design/bike1/10173/moms/images/common/main_md_item_tit.gif" alt="MD's Pick" />
</h2>
<div class="item-list">
<table summary="상품이미지, 상품 설명, 가격">
<caption>MD's Pick</caption>
<colgroup>
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
<col width="20%" />
</colgroup>
<tbody>
<tr>
<!--/loop_recmd_product(30)/-->
<td>
<dl class="item">
<dt class="thumb"><a href="<!--/recmd_product@name/-->" /></a></dt>
<dd class="infos">
<p class="item-name"><!--/recmd_product@name/--></p>
<!--/if_recmd_product@is_soldout/-->
<p class="item-price"><font color="#FF0000">[품절]</font></p>
<!--/else/-->
<p class="item-price">
<!--/if_recmd_product@price_consumer(+1)/-->
<span class="price-strike">\<!--/number/recmd_product@price_consumer/--></span>
<span class="price-red">\<!--/number/recmd_product@price_sell/--></span>
<!--/else/-->
<span>\<!--/number/recmd_product@price_sell/--></span>
<!--/end_if/-->
</p>
<!--/end_if/-->
<!--/if_recmd_product@link_preview/-->
<p class="closeup">
<a href="<!--/recmd_product@link_preview/-->" class="btn-overlay-show"><img src="/design/bike1/10173/moms/images/common/item_previe_ico.gif" alt="미리보기" /></a>
</p>
<!--/end_if/-->
</dd>
</dl>
</td>
<!--/if_step(5)/-->
</tr><tr>
<!--/end_if/-->
<!--/end_loop/-->
</tr>
</tbody>
</table>
</div>
</div><!-- .md-items -->
<div class="small-banner-container">
<ul class="clearfix">
<li class="float-l"><a href= http://bkmotors.co.kr/atvdelivery target='_blank'><img src="/design/bike1/10173/moms/images/common/banner01.jpg" alt="blog" /></a></li>
<li class="float-l"><a href= http://bkmotors.co.kr/utvdelivery target='_blank'><img src="/design/bike1/10173/moms/images/common/banner02.jpg" alt="COFFEE & CAFE" /></a></li>
<li class="float-l"><a href= https://www.facebook.com/주바이크원-980759432037519 target='_blank'><img src="/design/bike1/10173/moms/images/common/banner_003.jpg" alt="COOKIE" /></a></li>
</ul>
</div>
<hr />
<!--/include_footer(1)/-->
</div><!-- #wrap -->
<script type="text/javascript" src="/design/bike1/10173/moms/js/idangerous.swiper.2.7.6.min.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
var main_rolling = new Swiper('#event-rolling-container', {
//autoplay: 3000,
loop: true,
watchActiveIndex: true,
paginationClickable: true,
pagination: '#event-rolling-container .swiper-pagination',
paginationBulletRender: function(index) {
return $('<span />', {
html: function() {
$(this).append(index + 1);
},
click: function(e) {
e.preventDefault();
$(this).parent().trigger('click');
}
}).addClass('swiper-pagination-number');
},
paginationElementClass: 'swiper-pagination-bullet',
paginationActiveClass: 'swiper-pagination-bullet-active'
});
});
})(jq183);
</script>
#event-rolling-container { position: relative; width: 5000%; height: 420px; }
#event-rolling-container .swiper-pagination { position: absolute; bottom: 12px; right: 20px; }
#event-rolling-container .swiper-pagination .swiper-pagination-bullet { cursor: pointer; opacity: 1; margin-left: 7px; width: 14px; height: 14px; background-color: #fff; }
#event-rolling-container .swiper-pagination .swiper-pagination-bullet-active { background-color: #000; }
.small-banner-container { position: relative; margin-top: 20px; margin-bottom: 35px; }
.small-banner-container .float-l { float: left; }
.small-banner-container .float-r { float: right; }
.items-wrap { position: relative; }
.items-wrap .tit-prd { text-align: center; }
.other-wrap { position: relative; }
.other-wrap .cols-left { float: left; width: 420px; margin-right: 20px; }
.other-wrap .cols-left ul li { float: left; width: 120px; margin-right: 20px; margin-bottom: 20px; text-align: center; }
.other-wrap .cols-left ul li span { display: block; margin-top: 10px; display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.other-wrap .cols-left ul li img { width: 120px; height: 120px; }
.other-wrap .cols-middle { float: left; width: 290px; }
.other-wrap .cols-middle ul { width: 270px; }
.other-wrap .cols-middle ul li { padding-left: 10px; padding-bottom: 12px; }
.other-wrap .cols-middle ul li a { font-size: 12px; color: #8a8a8a; display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.other-wrap .cols-right { float: right; width: 440px; }
.other-wrap .cols-right li { float: left; margin-left: 10px; margin-bottom: 10px; }
.other-wrap .subject-in h4 { margin-right: 20px; margin-bottom: 20px; text-indent: 10px; position: relative; height: 26px; line-height: 26px; font-size: 16px; font-weight: bold; color: #fff; background-color: #6bcbba; }
.other-wrap .subject-in h4 a { position: absolute; top: 0; right: 0; }
답변 1
/* 기본 이미지 스타일 */
.banner{
max-width: 100%; /* 이미지가 원본 크기보다 큰 경우에만 조정 */
}
/* 모바일 장치에 대한 미디어 쿼리 */
@media only screen and (max-width: 767px) {
.banner{
width: 100%; /* 이미지 너비를 100%로 설정 */
height: auto; /* 가로 너비에 따라 세로 비율을 유지 */
}
}
이걸 응용해 보세요.
해당 배너에 .banner 클래스 추가하거나 스타일의 클래스를 변경하세요