2014-04-23 4 views
5

너비 : 100 % 및 최대 너비 : 100 % 한 번만 사용하면 교환 할 수 있습니까?너비 : 100 % 대 최대 너비 : 100 %

img{ 
    width:100%; 
} 

와 가진 :

img{ 
    max-width:100%; 
} 

내가 여기서 뭔가를 놓치고 예를 들어

내가 가진 동일한 결과를 얻을?

답변

8

이미지가 항상 요소보다 큰 경우 두 규칙 내에있는 이미지가 동일하게 나타납니다. img가 첫 번째 규칙보다 상위 요소보다 작은 경우 상위 요소의 전체 너비로 늘립니다. 두 번째 규칙은 그렇지 않습니다.

+1

네, 테스트 해 보았습니다. 설명대로 작동합니다. 그래서 너비 : 100 %를 사용해야합니다. 이미지가 부모 요소만큼 넓어지기를 원한다면 최대 너비 : 100 %를 지정해야합니다. 실제 크기를 초과하여 늘리지 않도록하려면 100 %를 사용해야합니다. –

+0

꽤 많이 있습니다. 개인적으로 부모 요소가 이미지보다 커지면 이미지가 흐려지기를 원하지 않기 때문에 이미지에'width : 100 %'를 적용해야합니다. 또한,'max-width : 100 %'를 전역 적으로 설정하면 제 3 자 위젯과 잠재적으로 자신의 콘텐츠에 예기치 않은 부작용이 발생할 수 있다는 점에 유의하십시오. 예를 들어 Google지도에 문제가있었습니다. 대신 나는 그 규칙으로'img.responsive'와 같은 클래스를 생성하거나'.blog-post img'와 같은 선택자를 통해 컨텐츠 영역에 범위를 지정하는 것을 제안합니다. –