고정 너비 vs 반응형

반응형 웹 디자인에서는 이미지 스타일 지정을 위한 두 가지 옵션이 있습니다. 이미지를 고정 크기로 유지하고 필요할 경우 중단점에서 조정하거나 부모 컨테이너에 따라 페이지 크기를 조정할 수 있습니다.

SVG를 background-image로 사용하는 경우, 브라우저에게 혼란을 줄 수 있어 주의해야 합니다. 이미지 실제 사이즈에서 다른 사이즈 변경할 경우, background-size를 사용해 사이즈 축소 또는 잘라내기 등을 해야합니다.

사이즈 조정이 가능한 SVG를 만들 때, 다음과 같은 몇 가지 사항을 기억해야 합니다. (background-image 구현과 함께)


Object

width: 100%;로 설정합니다.

Breaking Borders Logo

Inline

max-height이 필요합니다.
Safari는 (복잡한 경우) 창 크기를 재조정하지 않습니다.

Breaking Borders Logo

Background-image

이미지 비율을 조절하려면 padding-bottom: #%;를 추가합니다. 이 요소가 없으면 이미지는 보이지 않습니다.

Breaking Borders Logo

Img

width: 100%;로 설정합니다.

Breaking Borders Logo



 [ 한빛미디어 HTML+CSS 도서 보러가기]