테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

가로 이미지가 화면 밖으로 나갑니다. 채택완료

허걱김선생 2년 전 조회 1,540
답변 1
목록

수고하십니다.

아래 css를 이용해서
이미지를 나열했는데요.

모바일에서 보니
가로 이미지가 화면 밖으로 나갑니다.

화면 밖으로 나가지 않게
가로 이미지를 auto 또는 100%로 잡고 싶은데
방법을 모르겠어요.

자동 리사이징 되는 방법을 알 수 있을까요?

</strong>

<section class="tl_box_quick_wrap_02 clearfix">

 <div class="inner">

 

  <ul>

    <li data-aos="fade-down" data-aos-delay="800">

<a href="/keepsake" target="_blank"><img src="<?php echo G5_URL;?>/img/index/2-1.jpg" alt="메인페이지 1" ></a>

</li>



    <li data-aos="fade-down" data-aos-delay="1000">

<a href="/arrangement" target="_blank"><img src="<?php echo G5_URL;?>/img/index/2-2.jpg" alt="메인페이지 2" ></a>

</li>

  </ul>

 </div>

</section>

<strong>


css

</strong>

/*2단 가로박스 변형*/

.tl_box_quick_wrap_02 { width:100%;  height:auto; padding-bottom:50px}

.tl_box_quick_wrap_02 ul li { width:50%; height:150px; padding: 65px 0px; float:left; background-size:cover; background-repeat:no-repeat; background-position:bottom right; }

@media screen and (max-width: 980px) {

  .tl_box_quick_wrap_02 ul li { width:100%;}

.tl_box_quick_wrap_02 ul li span { max-width:158px}

}



@media screen and (max-width: 640px) {

  .tl_box_quick_wrap_02 ul li h2 { font-size:36px}

}

/*2단 가로박스*/</p>

<p><strong>

#모바일이미지
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
예
예뜨락
2년 전

                
                
@media screen and (max-width: 640px) {
    .tl_box_quick_wrap_02 ul li h2 { font-size:36px}</code></pre>

<pre>
<code>    .inner img{width:100%;height:auto;}
}</code></pre>

<p><code>

            



위와 같이 한번 해보세요
로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

�
허걱김선생
2년 전
우와 단번에 해결 되었어요.
정말 감사합니다. (__)

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인