모바일이미지 해상도

모바일이미지 해상도

QA

모바일이미지 해상도

본문

반응형 웹으로 홈페이지를 제작하였는데요,

웹에서는 페이지를 줄여도 해상도가 깨지지 않는데.

모바일에서 이미지는 잘리지 않지만

해상도만 흐려지는 상태로 나타납니다..


검색해보니.. 모바일은 이미지 해상도가 웹보다 두배이상 커야 한다고 하는데

모바일에 해상도를 늘린 이미지를 사용하려면 

이미지 크기를 그대로 하고 해상도만 높여도 해상도는 차이가 없어서

깨지는건 똑같이 나옵니다 ㅠㅠ


혹시 어떻게 해야 모바일에서 깨지지 않는건가요ㅠㅠ

이 질문에 댓글 쓰기 :

답변 3

가령, 피씨에서 보일 이미지 크기가 100x100 이라면 모바일을 대비해서 200x200으로 제작하곤 합니다. 이는 모바일기기들의 dpi가 다르기 때문인데요. 이 경우도 2배일뿐 그 이상의 dpi를 지원하는 모바일기기들에서는 깨어지는 것이 마찬가지겠지요.


테스트하시는 모바일기기의 dpi를 살펴보시고 거기에 맞는 배율로 이미지를 늘려주시면 됩니다. 물론 이때 이미지에 대한 반응형처리는 되어 있으셔야 합니다.


흔히 

img {

max-width: 100%;

height: auto;

}

와 같은 처리가 되어 있죠.

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

 

답변을 작성하시기 전에 로그인 해주세요.
전체 22
QA 내용 검색
filter #웹 ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT