오버 플로우는 : 반항적 인 아이 이미지

Question

이것은 이상한 일이다

무시 숨겨진 :

.naReduced{ 
    max-height: 200px; 
    height:200px; 
    width: auto; 
    overflow:hidden; 
    border: blue 1px solid; 
} 
.naReduced>img{ 
    height: 250px; 
    width: auto; 
} 

당신은 여기에서 볼 수 있듯이 : 오버 플로우 http://syndex.me (한 잔 마시는 AA 여성의 여전히 TV로 나타납니다 두 번째 포스트) : 숨김이 무시되고 있습니다.

요소를 검사하면 모두 CSS의 순서대로 정렬되지만 div 계산 스타일은 여전히 ​​200px 대신 250px로 설정됩니다. 그 이유는 무엇입니까?

Answer 1

이유 때문에 상위 사업부에 적용한 .noArt 스타일이다. 이것은 display: table-cell;으로 지정되어 div가 콘텐츠를 포함하도록 늘립니다 (표 셀처럼).

해제하면 원하는대로 작동합니다.

Answer 2

디스플레이 속성을 block으로 변경해야합니다. 현재 table-cell이며 overflow:hidden과 충돌합니다. 이런 식으로 뭔가를 수행해야합니다

.naReduced{ 
    max-height: 200px; 
    height:200px; 
    display:block; 
    width: auto; 
    overflow:hidden; 
    border: blue 1px solid; 
}