모바일 에서 여러개의 이미지를 자동크기 조절시 가로로 모두 나오게 하는방법
본문
<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>
위에 소스를 적용시 하단처럼 세로로 쭈~욱 나옵니다.
어래처럼 가로로 나오도록 하려면 어떻게 해야 하나요? ^^;
답변 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으로
감사합니다.
잠시후 적용해 보겠습니다.
도움 주셔서 감사합니다.^^
적용해 보니 세로로 나옵니다~
좀 응용해서 자동 크기조정/가로배열되게 적용 되었습니다.
근데, 제가 적용한 방법이 맞는지 모르겠습니다~~^^
답변을 작성하시기 전에 로그인 해주세요.