CSS 정리 Div 안에서 이미지 사이즈, 위치 조절 > html

모바일이나 아님 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가 지정되어야 한다면 다음과 같이 코딩하면 됩니다.