모바일이나 아님 PC웹에서 필요할 경우... 그러나 특히 모바일일 경우...
스마트폰 단말기의 화면 크기가 워낙 다양해서 사이즈가 좀 큰 이미지 같은 경우엔 화면을 넘어가는 경우가 있습니다.
사실은 많습니다.
이럴경우 가장 이상적인게 화면 사이즈에 따라 이미지의 크기가 달라지는것이 되겠죠.
다음과 같은 CSS로 해결할 수 있습니다.
<div style="width: 100%; height: 100px; line-height: 100px; text-align: center">
<img src="image.png" style="width: 100%; max-width: 760px; vertical-align: middle" />
</div>
이렇게 코딩하고 브라우져에서 확인할 때 브라우져 폭을 늘였다 줄였다 하면 늘였을 경우엔 이미지가 커지나 원래 크기 이상으로는 커지지 않습니다. 또 줄이면 화면을 벗어나지 않고 화면 폭에 맞춰서 이미지가 작아져 보이게 됩니다.
바깥쪽을 감싸고 있는 div tag에 "line-height: 100px" 부분이 있는데 값은 "height" 속성과 같이 맞춰줍니다. 만약 line-height를 지정하지 않으면 img tag의 style에서 아무리 vertical-align을 middle 또는 bottom으로 지정해도 이미지는 위에 붙어서 나타나게 됩니다.
img tag의 style 속성 중 "width: 100%; max-width: 760px;" 부분이 있습니다. 만약 구색을 맞춘다고 "height: 100%; max-height: 90px;" 이런식으로 코딩을 더 하게 되면 이미지가 작아졌을때 폭과 높이가 한꺼번에 줄어드는것이 아니라 폭만 줄어들게 됩니다.
만약... background image가 지정되어야 한다면 다음과 같이 코딩하면 됩니다.
<div style="width: 100%; text-align: center">
<img src="image.png" style="width: 100%; max-width: 760px; vertical-align: middle" />
</div>
출처 : http://www.seobangnim.com/zbxe/HTML/594463
'▣ 디자인 ▣ > 웹 접근성' 카테고리의 다른 글
웹근성 관련 총괄 정보 - nhn 제공 (0) | 2013.02.27 |
---|---|
301 vs 302 리디렉트(redirect) (0) | 2012.12.07 |
[웹표준 / 웹접근성] HTML a href 태그 와 javascript 의 올바른 표현법 (0) | 2010.03.07 |