반응형 웹디자인의 조건 img

반응형으로 반응하는 웹디자인에서 img 는 어떻게 처리하는지를 알아봅니다.

이전에는 반응형 웹디자인의 조건 글꼴크기와 width 에 대해서 알아보았습니다.

여기서는 img 에 대해서 알아보는데요. 이건 비교적 간단합니다.

img 에 대해서 아래처럼 처리하면 됩니다.

img { 
	max-width: 100%;
}

img 뿐만 아니라 비디오나 리치 미디어와 같은 가로 너비가 고정된 엘리먼트에도 동일하게 사용합니다.

그럼 아래처럼 표기하면 됩니다.

img,
embed,
object,
video { 
	max-width: 100%;
}

이처럼 비교적 간단합니다.

문제는 max-width를 지원하지 않는 IE.6 입니다.

IE.6에서 max-width 를 지원하게 만드는 방법은 몇가지가 있습니다만 expression필터를 종종 사용합니다.

하지만 문제가 없는것은 아닙니다.

더군다나 IE6 사용율도 떨어지고, 문제가 있기에 그냥 IE6에서는 max-width: 100%; 를 사용이 안되니까 width: 100%; 를 사용합니다.

IE6만 해당되는 주석을 처리해서 width: 100%; 를 사용합니다.

max-width 의 짝꿍 overflow....

만약 이미지가 컨텐츠보다 큰 경우.

배경이미지가 이런 경우가 종종있습니다.

feature 안에 img 가 있는데 이 img 가 컨텐츠보다 큰 이미지일 경우는 아래처럼 설정합니다.

.feature {
	overflow: hidden; 
}
.feature img {
	display: block;
	max-width: auto;
}

너비가 고정된 이미지를 가변 컨텍스트에서 사용할 수 있게 해주는 다른 방법도 있습니다.

가변 레이아웃에 너비가 긴 이미지를 적용하는 방법에 대해서는 아래 주소를 참고하세요. 여러가지 실험이 있으니 참고하시면 됩니다.

demun(대문블로그)