Как сделать графическое изображение отзывчивым в css

Question

У меня возникли трудности с графикой, чтобы вести себя в отзывчивом дизайне.

Графические в вопросе основного изображения ниже меню в http://bit.ly/1waPylP

HTML

Там нет width атрибута на моем графике.

<div class="gc-responsive-div"> 
<img class="aligncenter size-full wp-image-28 gc-responsive-img" src="/wp-content/uploads/sites/8/2014/12/G_HOME.png" alt="Gotham Communications Buttons Graphic" /> 
</div> 

CSS (добавлены как самые последние настройки в каскаде)

я пытаюсь заставить изображение к максимальной ширине 100%:

div.gc-responsive-div, 
img.gc-responsive-img { 
    max-width: 100% !important; 
} 

Мои Ожидание

Я хочу, чтобы основное изображение отрегулировалось к размеру видового экрана, уменьшившись в ответ ive мода шириной & по высоте по сравнению с оставшейся на естественной высоте и ширине графика, которая переполнена вне точки зрения. Когда я просматриваю домашнюю страницу на большом экране монитора, основная графическая (естественная ширина = 663 пикселей и естественная высота = 616 пикселей) выглядит так, как было разработано. Тем не менее, когда я смотрю на домашнюю страницу на моем iphone, основной рисунок появляется в своей первоначальной естественной ширине и высоте справа от экрана, и около 80% графического экрана выходят за экран и не могут быть замечены.

Для меня отзывчивый означает, что графический объект сжимается, чтобы правильно потреблять точку обзора и иметь соотношение сторон в окне просмотра.

Я не могу заставить его работать. Что я здесь делаю неправильно?

Снимки экрана

Большой экран монитора (выглядит как задумано)

Mobile Device (графический не изменяет размер)

Спасибо.

Answer 1

Код HTML/CSS все кажется прекрасным. Скорее всего, есть фиксированная ширина, установленная на одном или нескольких элементах контейнера, найти ее и добавить/изменить ее на max-width, либо отрегулировать ее в мультимедийных запросах, если это необходимо.

Также убедитесь, что у вас есть <meta name="viewport" content="width=device-width,initial-scale=1"> или аналогичные чувствительные метатеги.

Answer 2

Вы можете установить графику как background-image и добавить свойство background-size:contain к изображению контейнера. Это автоматически растянет всю графику (поддерживая пропорции) внутри контейнера. Затем, если вы хотите, чтобы ваш контейнер изображений настроился на область просмотра, вы можете использовать на нем viewport units, например, width:50vmin;height:50vmin;.