img height "jumps" width：100％on site load

私はシンプルだがトリッキーな問題を抱えています。たとえば、ラッパーの幅は500ピクセルです。内部には可変サイズ（ラッパーより大きい）の画像があります。img height "jumps" width：100％on site load

<div class="wrapper"> 
    <img src="image.jpg" width="1000" height="500" /> 
</div>

私はこれにCSSを設定するのであれば：

.wrapper { 
    width: 500px; 
} 

.wrapper img { 
    width: 100%; 
    height: auto; 
}

を像高（だけのためのキャッシュの最初の負荷に）サイトの負荷に「ジャンプ」。画像の高さを明示的に設定せずにその「ジャンプ」を止める方法はありますか？

これはモバイルフレンドリーなサイトなので、さまざまな画面解像度でラッパーの幅を@mediaに変更して、イメージの高さを明示的に設定できません。

出典

2012-01-23 Philipp Kühn

[画像のサイズを指定する]（http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions） –

こんにちは。あなたがまだ同じ問題を抱えているかどうかはわかりません。今日私にも起こっていることに気付きました。あなたのコンテナが実際のイメージの幅/サイズよりも小さければ、そのジャンプ効果が起きることがわかりました。ここで私がしたことは次のとおりです：画像が1024x800の画面に収まるようにし、CSSを 'width：100％'に設定して、画像を1000pxで保存します。「問題解決」私は24pxのストレッチで生きることができます（比例して伸びます）。試してみてください、歓声。 –

あなたの場合、次のようにしてください：画像を490ピクセル幅で保存し、 '.wrapper img'のCSSクラスを' width：100％; 'に設定し、' width：500px; '属性を保持したままheight属性を削除してください'.wrapper'のために。これはあなたの問題を解決するはずです。 –

-2

画像の高さ属性を削除し、CSSから高さも削除します。

出典

2012-01-23 23:56:33

いいえ。働いていない。問題は：私は、幅と高さの属性がない画像がある場合、画像は常にサイトの負荷で "ジャンプ"しています。画像にこれらの属性がある場合、「ジャンプ」はありません。私の場合は、幅：100％のソリューションを検索します.... –

高さだけを取り除きます。幅を残しておけば、すべてが並べ替えられます。 –

番号。それは動作していません。現場でのロード（キャッシュ内の画像なし）で、画像の高さは0pxからxxxpxに50msほどジャンプします。これはどのブラウザでも可能です！ –

-1

インラインピクセルではなく、イメージサイズをパーセントで表示してください。

出典

2012-01-23 23:36:25 sanusart

ええ...私のCSSを見てください。幅は100％に設定されます。ラッパーの幅が可変であるため、高さをすべてに設定することはできません。 –

私はこれを好きですhttp://jsfiddle.net/SafDk/ – sanusart

いいえ...それは別の効果です。 http://jsfiddle.net/2QVsM/13/を見て、キャッシュをリロードするためにctrl + r（またはブラウザ内の何でも）を複数回クリックします。あなたは国境に国境が表示されますか？ :) –

パディングボトムをパーセント単位で要素内にラップすることができます。そのような：

<div style="height: 0px; padding-bottom: X%">

X = Height/Width * 100。

出典

2016-10-17 08:38:19 Brendon

img height "jumps" width：100％on site load

答えて

関連する問題