レスポンスグリッドのレイアウトがメディアクエリ内で破損する

Question

下部の画像が押し出され続ける理由を理解するための助けが必要です。私はレスポンシブなグリッドレイアウトと個人用Webページを開発しています。イメージは、4列のレイアウトで表示されるように設定され、メディアクエリは2列レイアウト@ 800pxに変更されます。エッジをドラッグしてブラウザの幅をリサイズすると、レイアウトが分割され、数pxごとにウィンドウが縮小されます。例えば。 800pxでレイアウトは良いですが、799pxは破損し、797pxでうまくいきます。なぜこうなった？ codepenの画像が何のソースを持っていないように、ページのHTMLとCSS

<p data-height="265" data-theme-id="0" data-slug-hash="VMeJMq" 
    data-default-tab="css,result" data-user="smedz28" 
    data-embed-version="2" data-pen-title="Media query breaking" 
    class="codepen">See the Pen 
    <a href="https://codepen.io/smedz28/pen/VMeJMq/">Media query breaking</a> 
    by Marc Smedley (<a href="https://codepen.io/smedz28">@smedz28</a>) 
    on <a href="https://codepen.io">CodePen 
    </a>. 
</p> 
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"> 
</script> 

codepen

Answer 1

jae.phoenixが画像サイズで正しく表示されているように見えます。コンテナのサイズとHTML/CSSではそれほど違いはありませんでした。それはレイアウトを破っていた実際のイメージサイズでした。

私はすべての画像をリサイズやレイアウトは、それはあなたの問題を解決するかどうかを確認するためにあなたのイメージの幅を減らして完全に

を動作しているようですか？ - jae.phoenix

Answer 2

へ

リンクは、行動を複製することはできません。

DOMインスペクタを使用すると、すべての画像にmax-width:100%プロパティが定義されています。 CSS Box Modelのため、画像の幅が100％より大きくなる可能性があります。border:3pxも設定されています。

は国境を補うためにmax-widthを調整してみてください：

img { 
    max-width:calc(100% - 6px); 
} 

または

img { 
    max-width:calc(100% - 6px) !important; 
} 

あなたが他のセレクタのオーバーライドを強制する必要がある場合。