CSS3 이미지 높이 자동

내가CSS3 이미지 높이 자동

<img src=... width='100%' height='auto'/>

의 라인을 따라 뭔가가 IE9에서 작동하지 않는 것을 발견 - 이미지없이 높이 긴 수평선으로 나타납니다 . IE가 자동 속성을 이해하지 못하거나 의미로 해석하는 것처럼 보입니다. . height 속성을 그대로두면 트릭을 만들 수 있습니다. 이미지가 원하는대로 나타나고 다른 모든 브라우저에서도 괜찮은 것 같습니다.

문제가 해결 되었습니까? 잘, 이것은 내가 혼란 된 약간을 느끼는 것을 남겨두기 때문에 확실히이지 않는다. 나는 항상 이미지 높이와 너비를 지정하면 브라우저가 페이지를 렌더링하는 데 도움이된다고 믿었습니다. 이미지 가져 오기 전에 얼마나 많은 공간이 필요한지 알고 있기 때문입니다. 그래서 "height out = auto"트릭은 이미지 데이터를 가지고 페이지 레이아웃을 설정할 때까지 브라우저가 다른 페이지 리소스를 가져 오는 것을 막을 것이기 때문에 페이지 렌더링이 느려지는 것을 의미할까요?

출처

2013-01-15 DroidOS

'height' 속성을 제거하고''을 사용하거나 CSS를 사용하여 이미지 스타일을 지정하십시오. – wzazza

이것은 CSS와 절대적으로 관련이 없습니다. CSS 속성에 혼란스러운 HTML 속성이 있습니까? – BoltClock

당신 말이 맞아요. 나는 정말로 생각하지 않고 CSS를 제 제목에 넣었습니다. 나는 HTML 속성을 의미했다. 즉, 높이가있는 CSS 규칙을 정의하면 자동으로 동일한 IE 효과가 나타납니다. – DroidOS

"브라우저가 이미지 데이터를 가져올 때까지 브라우저가 다른 페이지 리소스를 가져 오는 것을 보류하고 페이지 레이아웃을 아직 설정하지 않았습니까?" 틀렸어. 넷스케이프 이후로는 그렇지 않습니다. 사실 이것은 넷스케이프의 핵심 혁신 중 하나였습니다. 이미지를 가져 와서 크기를 결정하고 페이지를 단순히 "리플 로우"할 때까지 페이지가 계속 렌더됩니다.

의견에서 언급 한 바와 같습니다. 너가 그것을 모르는 경우에 높이를 제거 하십시요. 자동으로 설정해도 브라우저가 어떤 방식 으로든 도움이되지는 않습니다.

출처

2013-01-15 04:42:15 basarat

감사합니다. W3C 사양 문서가 어딘가에있어 브라우저가이 상황과 같은 상황에 처했을 때 무엇을해야 하는지를 결정합니다. – DroidOS

http://www.w3.org/TR/html51/embedded-content-0.html#attr-dim-height 언급 "사용자 에이전트는 이러한 속성을 렌더링의 힌트로 사용해야합니다." 브라우저가 이러한 힌트로 어떻게 행동하는지는 인간의 논리로 남습니다. 고정 크기가 제공되면 dimesion 속성에 매핑됩니다. (http://www.w3.org/TR/html51/rendering.html#dimRendering에서) "애플릿, embed, iframe, img, object의 width 및 height 속성 또는 비디오 요소가 있고 이미지 버튼 상태의 유형 특성이있는 입력 요소는 요소의 'width'및 'height'차원 특성에 각각 매핑됩니다. " – basarat

감사합니다. IE가 처음이 아니라 여기에 미끄러 져 나왔습니다. height = 'auto'가 문제를 해결하기에 충분한 데이터를 가질 때까지 아무런 의미가없고 대기하지 않는다는 것을 결정하는 대신 0/1 픽셀 높이로 처리합니다 – DroidOS

CSS3 이미지 높이 자동

답변

관련 문제