모바일웹에서 이미지 사이즈는 어떻게 잡아야하나요? 채택완료

<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>

<style>

#ex_page {width:100%; max-width:1200px; margin:0 auto; }

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

    #ex_page .img01 {width:100%; }
    #ex_page .img01 img {width:100%; height:auto; }

    }
</style>

<section id="ex_page">

<div class="img01"><img src="000.jpg" /></div>

</section>

요즘 나오는 디바이스의 비율과 해상도는 천차 만별입니다.

아래의 해상도와 화면비율 위키자료를 참고하시고 최대해상도 에서 작업을 시작

실제 퍼블리싱때는 미디어쿼리를 활용해 각각 분기점별로 체크를 해주셔야 합니다.

https://zetawiki.com/wiki/스마트폰_해상도,_화면비율" target="_self">https://zetawiki.com/wiki/스마트폰_해상도,_화면비율

저는 최소 넓이 320px에 맞추고 이미지는 1.5~2배 큰 사이즈 이미지를 서버에 저장해서 css에서 width 값 조정해서 씁니다. 그럼 폰으로 보면 깔끔해 보입니다.