私は自分のサイトの応答性を高めるために変更を加えてきましたが、一般的に、これはうまくいっています。しかし、私は1つの問題に遭遇しました：
以前は、ブラウザが画像を読み込んでいる間、画像のレイアウトにスペースを確保するために、常にimg要素の高さと幅の属性を使用していました。これにより、ブラウザが画像を読み込んで必要なスペースを計算している間、レイアウトがぎくしゃくするのを防ぎます。
ただし、画像の応答性を高めた後max-width: 100%、高さと幅の属性を使用および削除することで、ブラウザは画像用のスペースを予約しなくなりました（画像ができなかったため、画像の高さや幅が事前にわからなくなったため）明示的には言わないでください）
私の目標は、最初の読み込み時にページレイアウトの適切なスペースを占めるレスポンシブ画像を作成することです。誰かがこれの解決策を知っていますか？
*編集（解決策） - これは私がこのトピックで見つけた最高の記事です。いいアプローチ！
ここでの正解は、「パディング ボトム トリック」を使用して垂直リフローを防止することです。この手法を機能させるには、画像の縦横比を事前に知っておく必要があります。
このトピックに関する優れた記事を投稿してくれた Anders M. Anderson に感謝します: http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/
ここにそれを行う方法があります。それは素晴らしいことではありませんが、うまくいきます。 http://jsfiddle.net/78Lvc/11/
イメージタグを次のように変更しました。
<img src="http://fitzgeraldmedia.net/images/range1.jpg" id="img" imgWidth="467" imgHeight="700" onload="fixMyWidth()"/>
いくつかの属性とonload. コードまたは手動で属性を追加する必要があります。高さと幅が必要な理由は、JS で必要なスペースを計算するために画像の高さを知る必要があるためです。
次に、インラインで、次のコードがあります。
<script>
//get the width of the browser right now
var containerWidth = document.body.offsetWidth;
//get the attributes that we have specified for this image
var imgWidth = document.getElementById("img").getAttribute("imgWidth");
var imgHeight = document.getElementById("img").getAttribute("imgHeight");
//since the img is to be 50% of the container width
var widthRatio = containerWidth / imgWidth / 2 ;
//now set the height of the image
document.getElementById("img").style.height = (imgHeight * widthRatio) + "px";
//once the image has actually loaded, run this
function fixMyWidth(){
//this will make it 'responsive' again
document.getElementById("img").style.height = "";
document.getElementById("img").style.width = "";
}
</script>
高さと幅の属性を取り除かないで、auto に設定してみてください。