모바일 배너잘림

모바일 배너잘림

QA

모바일 배너잘림

답변 1

본문

모바일 이미지 잘림 문의 드립니다.

메이크샵 사용중인데 그냥 pc버전 사용중일땐

확인해줄수 없다고 답변 받아서요..

px조절도 해보고 했는데 잘 안되네요..

도움요청드립니다.

 

 

3556305838_1690418138.8577.jpg

<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>

 

sir-dow-02.png?v=2

 

 

#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 클래스 추가하거나 스타일의 클래스를 변경하세요

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 1,284
© SIRSOFT
현재 페이지 제일 처음으로