20

私のモバイル Web サイトでは、異なるが既知の高さ/幅の画像を 2 つの制約付きで表示したいと考えています。

  • 画像はブラウザビューの幅全体を占める必要があります
  • プロポーションを維持するために、それに応じて高さを拡大または縮小する必要があります

ブラウザーが画像をダウンロードするとすぐに、次の CSS を使用すると非常に簡単です。

<img src="myImageURl" style="width: 100%; height: auto;" />

ただし、画像の読み込みには時間がかかるため、ダウンロードする前にブラウザーに画像をレイアウトしてもらいたいと考えています。そのため、ブラウザは画像を取得したら、ページを再レンダリングする必要はありません。次のアプローチを試しましたが、失敗しました。

// The image is not layouted before fetched
<img src="myImageURl" height="myImageHeight" width="myImageWidth" style="width: 100%; height: auto;" /> 

// The image is layouted, but wrong: height is not proportional to the width anymore
<img src="myImageURl" style="width: 100%; height: myImageHeight;" />

ここで何か助けていただければ幸いです。ただし、CSS でお願いします。必要がなければ、Javascript / jQuery を使用したくありません。

アップデート

この問題を抱えているのは私だけではないと思います: https://graphicdesign.stackexchange.com/questions/3274/fluid-images-how-to-set-width-and-height

4

1 に答える 1

34

Pete が既に述べたように、画像がダウンロードされる前に (自動) 計算を行うことはできないため、ブラウザーはその幅と高さを認識します。

ただし、画像の縦横比を事前に決定できるため、画像の周りにプレースホルダー要素を追加することで「回避策」を試すことができます。また、パーセンテージで指定された値は常に幅paddingに基づいて計算されるという事実を利用できます。 padding-top/-bottom であっても、要素の。

それは次のようになります。

<div style="position:relative; width:100%; height:0; padding-top:50%;">
  <img style="position:absolute; top:0; left:0; width:100%;" src="…">
</div>

これはdiv高さのない要素ですが、パディングトップです。これにより、計算された 100% 幅の 50% の実際の「高さ」が得られます。(これは、縦横比が の画像の場合です。それに応じて padding 2:1- 3:1top の値は 33.333% である必要があります。基本的にはheight/width*100.)

これにより、画像が読み込まれる前であっても、プレースホルダーが拡大されます。

画像自体は、この相対的に配置されたプレースホルダー内に完全に配置されます。これにより、ドキュメント内の同じ位置に表示されることが保証されます。

問題になる可能性がある唯一のことは、小数点を含む値に対して行わなければならない丸めです。1000 ピクセルの 33.333% は 333.33 ピクセルであり、ブラウザはそれを 333 ピクセルに丸める必要があります。ただし、サイズ変更された画像の実際の高さが 334 ピクセルである場合、プレースホルダー div がその 1 ピクセル分広がっている領域からはみ出してしまいます。それが許容できるかどうかは、実際のレイアウト (およびピクセル単位の正確さに対するあなたのフェチ) に依存する場合があります。

于 2013-03-20T10:44:17.450 に答える