모바일이미지 해상도
본문
반응형 웹으로 홈페이지를 제작하였는데요,
웹에서는 페이지를 줄여도 해상도가 깨지지 않는데.
모바일에서 이미지는 잘리지 않지만
해상도만 흐려지는 상태로 나타납니다..
검색해보니.. 모바일은 이미지 해상도가 웹보다 두배이상 커야 한다고 하는데
모바일에 해상도를 늘린 이미지를 사용하려면
이미지 크기를 그대로 하고 해상도만 높여도 해상도는 차이가 없어서
깨지는건 똑같이 나옵니다 ㅠㅠ
혹시 어떻게 해야 모바일에서 깨지지 않는건가요ㅠㅠ
답변 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>
