왜큰 그림이 있으면 화면이 깨져보이는 걸까요?

[손님]

IE로 보면 괜찮은데 불여우로 보면 화면이 깨지네요...
이상한건 며칠전엔 분명 불여우에서도 그림에 맞춰져서 화면 폭이 늘어나 보였던것 같은데 말이죠...
큰 사진이 몇개 없는거라 사이즈를 고치면 되긴 하지만 궁금해서요..
뭐라고 검색해야 될지 몰라 검색 못하고 그냥 여쭤봅니다. ^^;
제 블로그인데요, 이 화면이거든요?
http://saramcider.made.com/blog/index.p ... t1=5&ct2=3
왜 그런걸까요? ^^;

[hyeonseok]

페이지를 보면 IE 에서는 layout 이 깨지고 Firefox 에서는 layout 이 고정되다 보니 이미지가 넘치게 되지요.

이는 두 브라우져가 화면을 랜더링 하는 방식이 다르기 때문입니다. firefox 는 사용자가 지정한 것을 충실히 반영해서 화면을 랜더링 합니다. IE 의 경우는 자기 마음대로 랜더링을 해서, 이같은 경우는 보기에 더 좋을 지 모르나 제작자 입장에서는 아주 괘씸한 브라우져죠. ^^

넘치는 것이 싫으시고 layout 을 유지하고 싶으시면 overflow: hidden 을 적당한 곳에 넣어서 넘치는 이미지를 안보이게 할 수 있습니다. 물론 이미지의 일부가 보이지 않게 되겠지요.

자동으로 width 가 늘어나게 하시려면 min-width 를 사용하고 약간의 수정이 더 필요하겠지만 IE 는 min-width 를 지원하지 않으니 현실적으로 사용하기에는 무리가 있을 것 같네요.

답변이 되셨나요?

[손님]

하하하 그렇군요.. 괘씸한 IE가 지맘대로 화면을 갖고 노는거군요...ㅋㅋ
어쩔수 없는거라면 그냥 항상 사진 크기를 줄여서 올려야겠습니다. ^^

[파란사오정]

hyeonseok님께서 멋진 말씀을 해주셨네요.

맞아요...IE는 내부적으로 꽤 심오함엔진이 있는 것 같아요...
마술을 부리는 것 같아요.
왜 그런 거 있잖아요.
초보기자가 원고를 작성해서 편집부로 넘기면, 편집부에서
알아서 다 고쳐놓지요...

흐흐흐...(ㅇvO)

저는 콘텐츠의 <img> 태그에 width="100%" 속성을 제안해봅니다만....
(@.@)

[질문했던 손님 ㅎㅎ]

아~ 100%로 하니까 좋군요~ ^^
전 %가 실제 사진 크기의 비율인지 알았는데 layout에 대한 비율이군요~~ 고맙습니다 ^^
그리고 이 사이트에선 제목을 잘 안보게 되는데 글쓰다가 보게됐어요
별것도 없는데 칭찬도 고맙습니다 ㅎㅎ