3

CSSを使用して画像を正確な値にスケーリングしようとしています。

HTML：

<div id="thumbnail-container">
    <img src="sample-pic.jpg"/>
</div>

CSS：

#thumbnail-container img {
    max-height: 230px;
    max-width: 200px;
}

この例では、sample-pic.jpgは実際には320x211です。

Firefox 11.0では、このコードは完全に正常に機能し、FFsample-pic.jpgはCSSルールで規定されている230x211の最大制約にサイズ変更されます。

ただし、IE 9では、ルールmax-heightとmax-widthルールは完全に無視され、画像は通常の320x211サイズでレンダリングされます。

IE9とFF11.0の両方がこれらの最大制約を尊重するようにHTML/CSSを変更するにはどうすればよいですか？前もって感謝します！

4

2 に答える 2

6

Doctypeを宣言し、その前に出力や空白がないことを確認してください。たとえば、これはHTML5のDoctypeであり、出力の一番上に配置する必要があります。

<!doctype html>

また、IEが互換モードの場合、問題が発生する可能性があります。以下を追加してみてください<head>：

<!-- Forces user OUT of IE's compatibility mode and removes "broken page" icon --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

編集：テストできましたが、max-widthdoctype が機能しない原因にはならないようです。互換モードはそれに影響を与えていないようです（この問題に関して）。

于 2012-04-23T19:43:22.243 に答える
4

IE7+はとをサポートmax-widthしmax-heightます。

http://jsfiddle.net/gaby/qE6w6/でのデモ

ページが標準モードで実行されていることを確認してください。（有効なDoctypeがあることを確認してください）

于 2012-04-23T19:34:57.723 に答える