Firefox 이미지의 높이가 100 픽셀이되도록

Question

내 웹 사이트에 다양한 크기와 크기의 이미지를로드하고 있습니다. Chrome, Opera 및 Safari의 이미지가 모두 늘어나서 부 자연스럽게 늘어나거나 비뚤어져 보이지 않습니다. Firefox는 원본 이미지의 너비를 유지하고 이미지 높이를 100px로 설정합니다. 이 결과는 50x100, 150x100 및 2000x100 이미지입니다. 왼쪽에는 Chrome이 표시되고 오른쪽에는 Firefox가 표시됩니다. 모든 이미지가 정확하게 100px 높이 가길 원합니다. metahill.com에서

img.image-message { 
     padding-bottom: 2px; 
     height: 100px; 
     width: auto; 
    } 

보기 라이브 예 :이

img.image-message { 
     padding-bottom: 2px; 
     height: auto; 
     width: auto; 
     max-height: 100px; 
     max-width: 100%; 
    } 

이 일을 변경하지 않는 경우에만 height 및 width 설정처럼

이미지 클래스 보인다. 당신은 로그인이 사용자를 사용할 수 있습니다

Username: test_t 
Password: meta_hill_t 

Answer 1

흠, CSS에서 문제의 근원을 확인했다고 생각합니다. 사실 실제로는 <img> 요소의 스타일이 아니기 때문에 핀 고정하기가 어렵습니다. 그것은 chat.css이 정의에있다 : 당신이 파이어 폭스에 표시되는 문제가 explained by Mozilla으로, 원인의 display: -moz-box에 관한

#chat .chat-entry > .chat-entry-message { 
    display:-webkit-box; 
    display:-moz-box; 
    display:-o-box; 
    display:box; 
    padding: 3px; 
    word-wrap: break-word; 
} 

의 (예 : <img> 요소 문제가 발생한 등) 어린이 부모를 채우기 위해 성장하는 스타일의 요소. 같은 것으로 정의 변경 : 나는 display: box의 모든 변종 다른 목적이 있다면 확실하지 않다하지만

#chat .chat-entry > .chat-entry-message { 
    display: block; 
    padding: 3px; 
    word-wrap: break-word; 
} 

것은, 관찰 된 문제가 해결됩니다. (그래서이 픽스가 다른 것에 영향을 주는지는 말할 수 없습니다.) 어쨌든, 이것이 당신이 찾고 있었던 것이기를 바랍니다! 그렇지 않다면 알려주세요. 기꺼이 도와 드리겠습니다.

Answer 2

는 100 픽셀에 높이가 아닌 최대 높이를 설정합니다. 명시 적으로 선언하지 않는 한 폭은 자동으로 높이까지 이어집니다.