가로 이미지가 화면 밖으로 나갑니다.
본문
수고하십니다.
아래 css를 이용해서
이미지를 나열했는데요.
모바일에서 보니
가로 이미지가 화면 밖으로 나갑니다.
화면 밖으로 나가지 않게
가로 이미지를 auto 또는 100%로 잡고 싶은데
방법을 모르겠어요.
자동 리사이징 되는 방법을 알 수 있을까요?
css
아래 css를 이용해서
이미지를 나열했는데요.
모바일에서 보니
가로 이미지가 화면 밖으로 나갑니다.
화면 밖으로 나가지 않게
가로 이미지를 auto 또는 100%로 잡고 싶은데
방법을 모르겠어요.
자동 리사이징 되는 방법을 알 수 있을까요?
<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>
css
/*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단 가로박스*/
답변 1
@media screen and (max-width: 640px) { .tl_box_quick_wrap_02 ul li h2 { font-size:36px} .inner img{width:100%;height:auto;} }위와 같이 한번 해보세요
우와 단번에 해결 되었어요.
정말 감사합니다. (__)
답변을 작성하시기 전에 로그인 해주세요.