테스트 사이트 - 개발 중인 베타 버전입니다

모바일 이미지 깨짐현상 질문입니다. 채택완료

새우잠잠 10년 전 조회 22,402

모바일에서 이미지를 삽입하면 

분명 원본파일로(이미지 래스터화 안한 상태) jpg 100%로 저장하여 넣었는데도 불구하고

pc에서는 선명하게 뜨는데 모바일에서만 깨짐 현상이 발생합니다.

 

안깨지게 하는 방법이나 깨지는 원인을 알 수 있을까요??

http://ektha7303.dothome.co.kr/" target="_self">http://ektha7303.dothome.co.kr/ 

연습용으로 만들어보는 중인데 

모바일로 자동연동되오니 핸드폰으로 로고부분을 한번 봐주세요

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트

아마 모바일 브라우저의 선명도가 달라서 그럴겁니다. (특히 아이폰에서 위와같은 상황이 빈번하죠)

 

노출되는 사이즈의 2배크기로 이미지 원본을 준비하세요

 

ex ) 모바일에서 50px 노출 -> 이미지는 100px로 준비

100px 이미지를

 

 

참고로 네이버도 제가 리플단 방식으로 사용하고 있습니다.

http://m.naver.com">http://m.naver.com

 

http://static.naver.net/www/mobile/edit/2015/0318/mobile_110629401121.png">http://static.naver.net/www/mobile/edit/2015/0318/mobile_110629401121.png" width="200" height="48" alt="네이버" class="lg_m"> 

 

실제 이미지는 400 * 96 픽셀인데 200*48 픽셀로 html 에서 뿌려주고 있습니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

새우잠잠
10년 전
감사합니다 ~ 적용해보니 이미지가 선명하게 나와요 정말감사해용~~!ㅎㅎ

댓글을 작성하려면 로그인이 필요합니다.

모바일 기기마다 크기가 다 다르니 큰이미지를 준비하신뒤에

 

style="max-width:100px; width:100%; height:auto;"

 

최대크기를 잡아주시고 넓이는 100%로 높이는 넓이에 맞게 알아서 조절되도록 처리하면 됩니다

 

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

새우잠잠
10년 전
적용해보니 선명하게 출력이 됩니다. 좋은의견 감사드려요~ 나중에 봐서 채택은 못드렸네용~!

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인