Foundation 5重新调整了连续两个图像的大小

Question

我正在开发一个完整页面的foundation 5网站，该网站将在移动设备上运行。除了一个问题，一切都很顺利。

HTML和CSS

<div class="row collapse" id="banners">
<div id="cityView" class="large-6 columns small-6 columns">
<img data-interchange="[images/voip_site_top_img_box_left_2014_small.jpg, (default)], [images/voip_site_top_img_box_left_2014.jpg, (large)]"> 
</div>
<div id="cityOrange" class="large-6 columns small-6 columns">
<img data-interchange="[images/vi_site_top_img_right_2014_small.jpg, (default)], [images/vi_site_top_img_right_2014.jpg, (large)]"> 
</div>
</div><!--End Row-->
<div class="row" id="information">
<div id="informationContent" class="large-12 columns">
Content
</div>

#banners{
}
#cityView{
height:inherit;
}
#cityView img{
width:100%;
padding-bottom:1px;

}
#cityOrange{
height:inherit;
}
#cityOrange img{
width:100%;
}

当我在浏览器中加载它时，右侧的图像会被重新调整大小，并比左侧的图像小几个像素。

我无法在jsFiddle中重新创建它，所以这里有一张截图

我不能只在CSS中设置大小，因为在移动版上，图像会保留这个大小，而且太大了。我该怎么解决这个问题？

Answer 1

之所以会发生这种情况，是因为图像的宽度不同。

在HTML/CSS中，两个图像都包含在等宽的流体容器中(例如类large-6 columns)。这意味着，无论视口宽度如何，这两个六列容器的大小始终相同(例如视口的50%)。

在你的评论中，你说"左边的图像是949 x 362，左边的图像为971 x 362"。由于图像按比例缩放以适应其容器(max-width: 100%)，因此它们必须具有相同的宽度，否则它们将不会以相同的速率缩放，因为每个图像的图像宽度与容器宽度的比率不同。

解决方案是将图像切割成相同的大小(例如，将它们组合起来，然后将其切成两半，使它们都具有相同的宽度，可能是960px)，以便它们以完全相同的速率缩放(例如，图像宽度与容器宽度的比例相同)。

我希望这是有道理的。这可能会让你有点困惑，但这是RWD的一个非常关键的核心概念。