Основание 5 ре размеров двух изображений подряд

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%), они должны быть одинаковой ширины или они не будут масштабироваться с той же скоростью, потому что отношение ширины изображения к ширине контейнера будет различным для каждого изображения.

Решение состоит в том, чтобы разрезать изображения одного размера (например, объединить их, а затем разрезать пополам, чтобы они имели одинаковую ширину, вероятно, 960 пикселей), чтобы они масштабировались с одинаковой скоростью (например, соотношение ширина изображения до ширины контейнера идентична).

Надеюсь, это имеет смысл. Это может быть немного запутанным, чтобы обернуть вашу голову, но это довольно важная концепция ядра, когда дело касается RWD.