web-dev-qa-db-ja.com

IE6で1つの（CSS）次元を使用して画像をスケーリングするときにアスペクト比を保持するにはどうすればよいですか？

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

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

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

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

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

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

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

問題を説明するページのペアの例を次に示します。

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

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

javascriptcssinternet-explorerimageinternet-explorer-6
92
Tom Wright

Adam Luterからこのアイデアが得られましたが、実際には非常にシンプルでした。

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

IE6は現在、画像を細かくスケーリングし、これは他のすべてのブラウザーがデフォルトで使用するもののようです。

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

198
Tom Wright

うまくいったのはうれしいので、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にサイズ変更されます。

つまり、言い換えると、画像は常に少なくともコンテナと同じ大きさですが、アスペクト比を維持するためにbeyondスケーリングします。

これはおそらくあなたのサイトには役に立たず、IE6では機能しません。しかし、それはisビューポートまたはコンテナのスケーリングされた背景を取得するのに便利です。

14
Adam Luter

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

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

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

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

2
jgallant

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

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

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

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

IE6が近づいているという理由だけで最後のソリューションをお勧めします。20％でほぼ 月あたりの割合 になります。また、あなたのサイトはレクリエーションであり、英国にあることに注意してください。どちらも、人口統計がIE6から遠ざかるのに役立ちます。週末にIE6の使用率が40％近く低下し（引用なし）、英国はIE6人口がはるかに少なくなっています（引用なし、申し訳ありません）。

幸運を！

2
Adam Luter