html - 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 中重新创建它，所以这是一个 screenshot

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

Answer 1

发生这种情况是因为图像的宽度不同。

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

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

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

我希望这是有道理的。笼统地说可能有点困惑，但这是 RWD 的一个非常重要的核心概念。