Question

需要一些帮助来弄清楚为什么底部图像不断推出。我有一个响应式网格布局和开发个人网页。图像设置为以4列布局显示，媒体查询设置为更改为2列布局@ 800px。当我通过拖动边缘来调整浏览器宽度的大小时，布局中断然后每隔几个px解析自己，窗口减少了。例如。在800px时，布局很好，它突破799px，在797px处罚款等等。为什么会这样？

链接到页面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

由于codepen中的图像没有源代码，因此无法复制该行为。

使用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;
}

如果您需要强制覆盖其他选择器。

Answer 2

所以看起来jae.phoenix在图像大小方面是正确的，它不是容器大小和HTML / CSS。实际的图像尺寸打破了布局。

我调整了所有图片的大小，布局似乎完美无缺

缩小图片的宽度，看看是否能解决您的问题？ - jae.phoenix

媒体查询中的响应式网格布局

2 个答案: