왜 max-width가 img를 포함하는 블록의 너비가 아닌 기본 해상도로 제한합니까?

Question

나는 반응 형 웹 디자인에 대한 자습서를 보았습니다. 이 튜토리얼에서는 너비 스타일을 100 %로 설정하여 이미지를 반응 적으로 만들 수 있다고 지정했지만, 포함 요소의 너비가 충분히 넓 으면 (이는 내게 완벽 함) 튜토리얼에서 max-width를 100 %로 설정하여 이미지의 크기를 기본 해상도로 제한 할 수 있습니다. (이것은 나에게 이해가 가지 않습니다.) JSBin demonstrating the issue (이미지의 확대를 보려면 출력 너비를 조정하면되지만 확대 된 빨간색 배경 색상을 볼 수있는 기본 크기는 성장을 계속하지만 이미지.)

왜 포함하는 블록의 폭 이미지의 기본 해상도로 폭을 제한하지 않습니다하지 않는 이유는 무엇입니까?

대답을 위해 나는 추출물에서 찍은 연결된 링크가 포함 된 CSS 사양 또는 HTML 규격 중 하나에서 가져온 텍스트의 조각을 싶습니다. 이미지에 max-width가 이런 방식으로 작동하는 이유에 대한 표준 정의가 있어야한다는 제 가정이 잘못된 경우이 동작이 발생하도록 CSS 규칙이 적용되고 있는지 설명해주십시오.

여기에 링크 된 JSBin 예제에서 HTML 코드입니다 :

<style> 
    .column { 
     width: 70%; 
     margin: auto; 
     background-color: red; 
    } 

    .img-responsive { 
     max-width: 100%; /* image stops at native size */ 
     /* width: 100%; */ /* image enlarges greater than native size */ 
    } 
</style> 

<div class="column"> 
    <img src="myimage.jpg" class="img-responsive"> 
</div> 

Answer 1

글쎄, max-width이 최대 폭 (깜짝!)이 아닌 폭을 지정합니다 때문입니다.

다음 알고리즘은 두 속성이 '폭'속성의 사용 된 값에 영향을 미치는 방법을 설명

잠정적 인 중고 폭 '최소 폭'과 '최대 폭없이 (계산

1. ') 위의 "너비 계산 및 여백"아래의 규칙을 따릅니다.
2. 임시 사용 폭이 '최대 폭'규칙 위에서 다시 적용되지만 '폭'에 대해 계산 된 값으로 '최대 폭 "의 계산 된 값을 이용하여이 시간보다 큰 경우.

임시 사용 폭이 max-width보다 큰 경우, max-width 이미지가 성장하지 않습니다.