완벽하게 유동적 인 레이아웃을 CSS (%의 모든 요소)로 만들려고합니다. 이는 다양한 플랫폼 (iPad/모바일/태블릿)에서 원활하게 작동합니다.CSS 유체 레이아웃 및 이미지
유체 레이아웃을 사용하면 이미지가 완전히 유동적 일 수 있습니까? 예를 들어 :
는img { max-width:100%; }
사용자가 제공하는 조각은 이미지의 최대 폭이 100% 것을 말한다. 이는 브라우저 창이나 장치 뷰포트보다 더 넓은 의미가 없음을 의미 할 수 있습니다. 상대적으로 포매팅 된 부모 노드보다 더 넓은 의미가 없음을 의미 할 수도 있습니다. 그러나 창이 충분히 크면 이미지가 기본 크기로 렌더링됩니다.
배경 이미지 자체가 원래 크기에 따라 바둑판 식으로 배열 되었기 때문에 배경 이미지에 적용 할 수 없습니다. max-width 트릭은 주로 콘텐츠 이미지에 유용하지만 레이아웃이나 이미지 스타일링에는 유용하지 않습니다.
은으로 제한됩니다. IE6에서는 전혀 지원하지 않습니다. 그러나 그 시장은 규모가 작고 줄어들 기 때문에 그 문제를 무시할 수 있습니다.
코드 란 부모의 너비를 기준으로 이미지의 크기를 의미합니다. 따라서 이미지의 div가 500 픽셀이고 이미지의 최대 크기는 500 픽셀이거나 그보다 작을 수도 있습니다. 최대 너비에 대한 자세한 정보는 W3.org max-width
배경이 조금 다르면이 경우 background-size: x y;을 사용할 수 있습니다. CSS3이며 구형 브라우저에서는 지원되지 않습니다. 배경 크기에 대한 자세한 정보는 W3.org background-size