为什么我在 Zurb Foundation 5.5.3 中的 1000px 宽图像没有填满整个 large-12 列？答案

【问题标题】：Why is my 1000px wide image in Zurb Foundation 5.5.3 not filling the full large-12 column?为什么我在 Zurb Foundation 5.5.3 中的 1000px 宽图像没有填满整个 large-12 列？
【发布时间】：2016-05-25 02:01:01
【问题描述】：

我正在使用带有 vanilla CSS 的 Zurb Foundation 5.5.3。

我的 1000pxx430px 的图像没有占用此屏幕截图的 100% 宽度： https://www.dropbox.com/s/tkp1w4pz3e4xrgt/Screenshot%202016-05-24%2010.57.33.png?dl=0

我认为它是根据我的问题In Zurb Foundation 5.5.3 to what size(s) do I resize JPEGs such as 5472x3080 to take up the whole 12 columns or less using Interchange? 确定的，对于 Foundation 5.5.3，使用 12 列设置宽度等于 1000 像素，从而覆盖您想要将图像大小调整为 1000 像素宽的全部 12 列？

【问题讨论】：

你能在 SO 上发布小提琴或代码 sn-p 吗？

标签： zurb-foundation zurb-foundation-5

【解决方案1】：

您的行类宽度为 1200 像素，图像为 1000 像素。试试这个：

<img src="/img/IMG_4039_1000x430.jpg" style="width:100%">

它会像你期望的那样工作

【讨论】：

是的，谢谢我刚刚意识到这是由具有 codepen.io/shoaibik/pen/reXMaG .row { max-width: 1200px; 的 CSS 引起的}
你是对的。为了让页脚看起来不错，我复制了包含 CSS 的代码，每个代码笔 codepen.io/anon/pen/jqgjoP 将行设置为 1200px。现在的问题是，如果我删除了这一行，它会弄乱我的整个页脚，并且由于我有限的 CSS 技能，我无法修复它......视图从这个dropbox.com/s/hveb5wma7c774sr/… 到这个dropbox.com/s/fyhaq3toayz9q27/…
或者将行保留为 1200 像素而不是 1000 像素会更好...？我还应该在原始 Foundation.css 中更改什么以避免使用 1200px 行的问题吗？

【解决方案2】：

您还可以将.small-12 类添加到图像中，它将占用 100% 的可用宽度。

<img src="/img/IMG_4039_1000x430.jpg" class="small-12">

【讨论】：