모바일 에서 여러개의 이미지를 자동크기 조절시 가로로 모두 나오게 하는방법

모바일 에서 여러개의 이미지를 자동크기 조절시 가로로 모두 나오게 하는방법

QA

모바일 에서 여러개의 이미지를 자동크기 조절시 가로로 모두 나오게 하는방법

답변 1

본문

<style type="text/css">
.position{position:relative;width:100%;overflow:hidden}
.position .img-area{display:block;padding:5%}
.position .img-area img{max-width: 100%;} 
</style>

 

<div class="position">

<div class="img-area">

<img src="이미지" />

</div>

</div>

 

 

위에 소스를 적용시 하단처럼  세로로 쭈~욱 나옵니다.

3553503465_1599293081.2861.png

 

어래처럼 가로로 나오도록 하려면 어떻게 해야 하나요? ^^;

 

3553503465_1599293113.8113.jpg

 

 

이 질문에 댓글 쓰기 :

답변 1


<div class="position">
  <div class="img-area">
    <img src="https://picsum.photos/100/100"/>
    <img src="https://picsum.photos/100/100"/>
    <img src="https://picsum.photos/100/100"/>
    <img src="https://picsum.photos/100/100"/>
  </div>
</div>

 

와 같이 하면 옆으로 붙어서 나오질 않나요?  모바일에서는 이미지 사이즈에 따라 세로로 나옵니다.

위의 테스트 이미지를 사용해서 확인해 보세요.  사이즈 100x100인데  50x50이나 200x200으로

감사합니다.
잠시후 적용해 보겠습니다.
도움 주셔서 감사합니다.^^

적용해 보니 세로로 나옵니다~
좀 응용해서 자동 크기조정/가로배열되게 적용 되었습니다.

근데, 제가 적용한 방법이 맞는지 모르겠습니다~~^^

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