IE6で1つの（CSS）ディメンションを使用して画像をスケーリングするときに縦横比を維持する方法は？

ここに問題があります。画像があります：

<img alt="alttext" src="filename.jpg"/>

高さや幅が指定されていないことに注意してください。

特定のページでサムネイルのみを表示したい。HTMLを変更できないため、次のCSSを使用します。

.blog_list div.postbody img { width:75px; }

（ほとんどのブラウザーで）アスペクト比が維持された均一な幅のサムネイルのページを作成します。

ただしIE6では、画像はCSSで指定されたサイズでのみ拡大縮小されます。「自然な」高さを保持します。

これは問題を説明するページのペアの例です：

• サムネイルを表示するリスト
• フルサイズの画像を表示する単一のブログ投稿。

私はすべての提案にとても感謝していますが、（クライアントが選択したプラットフォームの制限により）HTMLの変更を伴わない何かを探していることを指摘したいと思います。CSSはJavaScriptよりも望ましいでしょう。

編集：画像のサイズとアスペクト比が異なることを言及する必要があります。

Adam Luterがこのアイデアを教えてくれましたが、実際にはとてもシンプルであることがわかりました。

img {
  width:  75px;
  height: auto;
}

IE6は画像を適切に拡大縮小し、他のすべてのブラウザがデフォルトで使用しているように見えます。

両方の答えをありがとう！

うまくいったことをうれしく思います。他のブラウザを模倣するには、IE6で「auto」を明示的に設定する必要があったと思います。

私は最近、画像を拡大縮小する別のテクニックを見つけました。この手法にはいくつかの興味深い機能があります。

1. 画像のアスペクト比が保持されます
2. 画像の元のサイズは維持されます（つまり、拡大するだけで縮小することはできません）

マークアップはラッパー要素に依存しています。

<div id="wrap"><img src="test.png" /></div>

上記のマークアップを前提として、次のルールを使用します。

#wrap {
  height: 100px;
  width: 100px;
}
#wrap img {
  min-height: 100%;
  min-width: 100%;
}

次にラッパーのサイズを制御すると、上記の興味深いスケール効果が得られます。

明確にするために、次の基本状態を検討してください：100x100のコンテナーと10x10のイメージ。結果は100x100のスケーリングされた画像です。

1. 基本状態から始めて、コンテナは20x100にサイズ変更され、画像は100x100にサイズ変更されたままになります。
2. 基本状態から始めて、画像は10x20に変更され、画像は100x200にサイズ変更されます。

つまり、言い換えると、画像は常にコンテナと少なくとも同じ大きさですが、アスペクト比を維持するためにそれを超えて拡大縮小されます。

これはおそらくあなたのサイトには役に立たず、IE6では機能しません。ただし、ビューポートやコンテナの背景を拡大すると便利です。

まあ、私はこの問題を解決するCSSハックを考えることができます。

CSSファイルに次の行を追加できます。

* html .blog_list div.postbody img { width:75px; height: SpecifyHeightHere; } 

上記のコードはIE6でのみ表示されます。アスペクト比は完全ではありませんが、多少正常に見えるようにすることができます。本当に完璧にしたい場合は、元の画像の幅を読み取るJavaScriptを記述し、それに応じて比率を設定して高さを指定する必要があります。

CSSで明示的なスケーリングを行う唯一の方法は、ここにあるようなトリックを使用することです。

IE6のみ。フィルターを使用することもできます（PNGFixを確認してください）。しかし、それらをページに自動的に適用するにはJavaScriptが必要ですが、そのJavaScriptはCSSファイルに埋め込むことができます。

JavaScriptが必要な場合は、コンテンツが読み込まれたら画像を調べて、JavaScriptに高さの欠落した値を入力させることもできます。（申し訳ありませんが、この手法のリファレンスはありません）。

最後に、このsoapboxをご容赦ください。この件については、IE6のサポートを避けたいと思うかもしれません。ルールの_width: auto後に追加してwidth: 75px、IE6が間違ったサイズの画像であっても、少なくとも合理的に画像をレンダリングできるようにすることができます。

IE6が間もなく終了するという単純な理由で最後のソリューションをお勧めします。20 ％で、月にほぼ1 ％減少します。また、私はあなたのサイトがレクリエーションであり、英国にあることに注意します。これらの両方により、人口統計学はIE6から離れる傾向があります。IE6の使用率は週末に40％近く低下します（引用なし）。英国ではIE6の人口統計がはるかに低くなっています（引用なし、申し訳ありません）。

幸運を！