수고하십니다.
아래 css를 이용해서
이미지를 나열했는데요.
모바일에서 보니
가로 이미지가 화면 밖으로 나갑니다.
화면 밖으로 나가지 않게
가로 이미지를 auto 또는 100%로 잡고 싶은데
방법을 모르겠어요.
자동 리사이징 되는 방법을 알 수 있을까요?
Copy
<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
Copy
/*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개 / 댓글 1개
채택된 답변
+20 포인트
2022-11-16 (수) 19:54:10
Copy
@media screen and (max-width: 640px) {
.tl_box_quick_wrap_02 ul li h2 { font-size:36px}
.inner img{width:100%;height:auto;}
}
위와 같이 한번 해보세요
답변에 대한 댓글 1개
허걱김선생
2022-11-16 (수) 20:14:24
답변을 작성하려면 로그인이 필요합니다.
정말 감사합니다. (__)