最大幅を設定しない：100％と高さ：自動;

Question

私のプロジェクトでは、ビューポートが縮小してコンテナが縮小すると、コンテナ内のすべての画像にCSS属性max-width: 100%;とheight: auto;があり、画像を縮小します。 これは機能していますが、ブラウザが画像を読み込んでサイズを取得せずにページを正しく描くことができないという代償があります。 <img width=100 height=100 />で画像を埋め込むと、ブラウザnormalyはスペースを予約し、残りのページをレンダリングします。 上記のcssが適用されるとすぐに、イメージがロードの進行中に0x0pxであるため、イメージ以下のサイトコンテンツが「ジャンプ」します。 これは二つの質問に私をリード：通常のプレースホルダの挙動を破壊することなくMAX-100 /高さの自動化技術を使用する方法は

1. ありますか？
2. そうでない場合は、ではないの画像の一部に適用する正しいクラス宣言は、自動サイズ変更され、正常に読み込まれ、読み込み中に正しいサイズのプレースホルダが使用されます。私はheight: initialとheight: inheritを試しましたが、どちらの試みでも、イメージはまだロードされる前に0x0pxですが、htmlのheight属性は無視されます。

私はフィドルを作成しましたが、キャッシングのために読み込みの問題が発生することはありません。したがって、https://jsfiddle.net/yrx52avq/4/からhttp://www.testserver01.de/fiddle.phpにコードをコピーし、遅延とキャッシュなしのオプションを追加しました。 ページを再読み込み：読み込み中に赤いボックスが飛び出します。緑色のものはそうではありません。

Answer 1

あなたのCSSでは、プロパティobject-fit:coverまたはobject-fit:containを使用して、次のコードを試してください。このプロパティは、コンテナに収まるようにイメージのサイズを変更します。

.container img { 
    object-fit:cover; 
    max-width:100%; 
} 

または

.container img { 
    object-fit: contain; 
    max-width:100%; 
} 

あなたが最初に標準の高さ/幅プレースホルダの技術を使用して、いくつかのJavaScriptが窓の負荷で実行可能性がありw3schools