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

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

Answer 1

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

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

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

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

我希望这是有道理的。包裹你的头可能有点混乱，但对于RWD来说，这是一个非常关键的核心概念。

基础5连续调整两个图像的大小

1 个答案: