모바일에 반응형 웹을 적용하여 이미지를 자유롭게 조절 할 수 있나요 ? 정보
모바일에 반응형 웹을 적용하여 이미지를 자유롭게 조절 할 수 있나요 ?
본문
m13.ksofterp.com
위 사이트에서는 아이폰의 가로 (320)을 기준으로 디자인하고 이미지 사이즈를 만든 다음 그냥 <div>로 이미지를 감싸 처리해서 480px에서는 거리 간격이 생깁니다.
==========================================================================================
모바일 사이트에 아이콘으로 사용할 이미지가 148px X 47px 가 있다고 가정 하겠습니다.
아이폰은 width: 320px;
기타 안드로이드폰 들은 대략 : 480px;
화면에 148px 아이콘 이미지를 여러개 뿌리면 아이폰은 <div>가 깨집니다.
궁금한 점 :
사용된 이미지의 사이즈를 적절하게 조절 시킬 수 있는가 ?
이것이 반응형 웹에서 표현이 가능한 것인가 ?
제가 생각하는 방법은
모바일 디바이스의 width 값에 따른 스타일을 지정할때 img { zoom:1.0; } 과 같이 배율을 계산하여 설정하면 어떨까를 생각해 보았습니다.
다른 분들은 어떻게 처리하시나요 ?
추천
0
0
댓글 3개
음... 내일 지운아빠님이나 전진님 오시면.... ㅜ.ㅜ
글쎄요..
보통 반응형 이미지라고 하면, 큰 이미지를 작은 화면에서 폭이 넘치지 않게 어떻게 보여줄까를 얘기하는 것인데,
이 경우는, 이미지들 크기가 이미 152로 잡혀있어서, 크기를 키우면 이상하게 보일테고..
대안으로,
480px 용 버튼 이미지를 별도로 만들고, 미디어쿼리를 써서 해당 폭 이상일때는, 그 이미지들을 사용하는 방법이나,
아예 480px 용 이미지를, 가로폭에 따라서 (em 이나 %를 써서) 적절한 비율로 줄여가면서 보이도록 할 수도 있겠죠..
보통 반응형 이미지라고 하면, 큰 이미지를 작은 화면에서 폭이 넘치지 않게 어떻게 보여줄까를 얘기하는 것인데,
이 경우는, 이미지들 크기가 이미 152로 잡혀있어서, 크기를 키우면 이상하게 보일테고..
대안으로,
480px 용 버튼 이미지를 별도로 만들고, 미디어쿼리를 써서 해당 폭 이상일때는, 그 이미지들을 사용하는 방법이나,
아예 480px 용 이미지를, 가로폭에 따라서 (em 이나 %를 써서) 적절한 비율로 줄여가면서 보이도록 할 수도 있겠죠..
역....시... 어려운 문제였군요..
말씀해 주신... 미디어쿼리를 좀 더 알아야 봐야겠습니다.
아울러 이미지 가로폭을 공부해 보는 것도 잊지 말아야겠구요.
아무튼... 좋은 정보 감사 드립니다.
말씀해 주신... 미디어쿼리를 좀 더 알아야 봐야겠습니다.
아울러 이미지 가로폭을 공부해 보는 것도 잊지 말아야겠구요.
아무튼... 좋은 정보 감사 드립니다.