Foundation5Re在一行中调整两个图像的大小

Question

我是工作在一个完整的网页基础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% )。

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

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

我希望这是有意义的。这可能有点让人困惑，但当涉及到RWD时，这是一个非常关键的核心概念。