CODEWITHSUNDEEP
htmlcsszurb-foundation
onTheInternet
onTheInternet

Reputation: 7253

Foundation 5 re sizes two images in a row

I am working on a full page foundation 5 site that will work on mobile. Everything is going fine except for one issue.

HTML and 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%;

}

When I load this in my browser, the image on the right gets re sized and becomes a few pixels smaller then the image on the left.

I cant recreate it in jsFiddle so here is a screenshot

I cant just set the size in the CSS because then on the mobile version the images retain that and are way too large. How can I fix this?

Upvotes: 1

Views: 389

Answers (1)

Ennui
Ennui

Reputation: 10190

This is happening because the images are not the same width.

In your HTML/CSS, both images are contained within equal width fluid containers (e.g. the classes large-6 columns). This means that no matter the viewport width, those two six column containers will ALWAYS be the same size (e.g. 50% of viewport).

In your comment you said "The image on the left is 949 x 362 and the image on the left is 971 x 362". Since the images scale proportionally to fit their container (max-width: 100%), they must be the same width or they will not scale at the same rate because the ratio of image width to container width will be different for each image.

The solution is to cut the images to be the same size (e.g. combine them and then cut that in half so they both have the same width, likely 960px) so that they scale at the exact same rate (e.g. ratio of image width to container width is identical).

I hope that makes sense. It may be a little confusing to wrap your head around but this is a pretty crucial core concept when it comes to RWD.

Upvotes: 1

Related Questions