응답 이미지 (최대 폭)

Question

는 다음 코드 조각을 고려하십시오

HTML :

<div> 
    <img src="http://placehold.it/600x150" /> 
</div> 

CSS :

div { max-width: 200px } 
img { max-width: 100% }​ 

을 기본 크기에 관계없이 이미지는 200 픽셀보다 넓지 않습니다. 여태까지는 그런대로 잘됐다. 여기

는 바이올린의 : 부모 요소가있는 경우, 그러나 http://jsfiddle.net/PeAAb/

---

의 display 세트 table에 :

div { max-width: 200px; display: table } 

이미지 마술 그것으로 table을 확대, 네이티브 폭으로 확장 . http://jsfiddle.net/PeAAb/1/

---

같은 실제 테이블과 일 : http://jsfiddle.net/PeAAb/2/

---

질문 :이 예상되는 동작 여기

는 바이올린입니까? 그렇다면이 문제를 해결하기 위해 무엇을 할 수 있습니까?

max-width 대신 부모의 width (백분율 기반 너비)을 올바르게 설정하면 이미지가 해당 상자로 다시 압축되지만 해결 방법이 아닙니다. 부모님이 유동적이어야합니다 (저는 사이트의 주요 구조에 이것을 사용하여 the sidebar HTML appear after the main content in the source, but with the sidebar being fixed width을 가질 수 있습니다).

또한 setting table-layout to fixed은 여기에서 no effect 인 것으로 보입니다.

Answer 1

여기서 문제는 테이블 (또는 테이블처럼 동작하도록 설정된 div)이 블록 요소가 아니며 max-width가 블록 요소에만 적용된다는 것입니다. 내 유일한 제안은 display : block을 사용하여 div에 table 요소를 래핑하는 것입니다. 세트. http://jsfiddle.net/PeAAb/4/

Answer 2

나는이 꽤 늦게 알아,하지만 아주 간단하고 아주 쉽게 밝혀졌다 대답은, 테이블 레이아웃이 발견 : 고정

다음은 관심있는 경우에 바이올린입니다.

여기 찾았 http://blog.room34.com/archives/5042

어쨌든, 이것이 내가 있다는 사실이 수수께끼에 대한 답을 찾는 분들을위한 것입니다.