5

私は大きな画像をスタイリングしている流動的なレイアウトを構築しようとしています:

.fluid_img {
  height: auto;
  width: auto;
  max-width: 100%;
}

これは問題なく動作します。問題は、html の img タグで幅と高さの属性を使用できなくなったことです (効果はありません)。これらの属性が必要なのは、ブラウザが画像が読み込まれる前に必要なスペースを「節約」できるようにするためです。これにより、画像が読み込まれたときにページの残りの部分が移動しなくなります。

両方の機能を持つ方法はありますか？(流動的な画像 + 画像の読み込み前に保存されたスペース)

4

5 に答える 5

2

私はまた、この問題に対する答えを探しています。max-width、width=およびを使用するとheight=、ブラウザには画像に適切な量のスペースを残すことができる十分なデータがありますが、そのようには機能しないようです。

今のところ、jQueryソリューションを使用してこれを回避しました。タグにwidth=とheight=を指定する必要があります。<img>

CSS:

img { max-width: 100%; height: auto; }

HTML:

<img src="image.png" width="400" height="300" />

jQuery:

$('img').each(function() { 
    var aspect_ratio = $(this).attr('height') / $(this).attr('width') * 100;
    $(this).wrap('<div style="padding-bottom: ' + aspect_ratio + '%">');
});

これにより、http: //andmag.se/2012/10/responsive-images-how-to-prevent-reflow/で見られる手法が自動的に適用されます。

于 2013-10-28T21:47:06.223 に答える
0

インライン スタイルは、設計上、スタイルシート スタイルよりも優先されます。CSS のカスケードは、外部スタイルシート (上から下に読むため、下が上に優先する)、スタイル内<head>(これも上から下)、インライン スタイル、ユーザー スタイルになります。これを処理する方法はいくつかありますが、尋ねられたように、それらのいずれかが本当に良いアイデアであるかどうかはわかりません。

1) スタイル シート、ヘッド、またはインラインで固定サイズを設定し、ページのさらに下に配置された自動サイズのスクリプトで上書きします。 <script>vdivid.style.width = 'auto'</script>

2)自動寸法<img>の にラップされた固定寸法の を作成します。<div>これは実際にはあなたが望むことをしません。`

3) 読み込みに時間がかからないように、画像を Web で最適化します。

4) ピクセル単位で設定された寸法は、固定されているため、通常、可変レイアウトで使用するものではありません。それが#fluiddiv {width:20%;height:20%;}流動的なレイアウトの仕組みです。または、% の代わりに em を使用できます。em の flex はデバイスのデフォルトのフォント サイズに基づいていますが、% の flex はウィンドウまたは親要素 (body 以外の親またはトップレベル ラッパーがある場合) のサイズに基づいています。この方法で歪みのない画像を取得するには... % ではできないと思うので、画像と同じ比率で em を使用してください。

于 2013-04-10T19:10:34.267 に答える
-2

以下を使用します。

 <img class="fluid_img" src="..." style="width: 50px; height: 100px;">

インライン スタイルは、優先順位に基づいてfluid_imgクラスからアタッチされているスタイルをオーバーライドします。これは、Firebug / Chrome の CSS に移動し、どのスタイルが に適用されているかを表示することで確認できます。img

さらに、画像を動的に挿入/変更するときに役立つ場合は、次の jQuery を使用できます。 

 $('<img>').src('...').css({width: 50, height: 100});

お役に立てれば！

于 2011-08-14T07:44:21.357 に答える