我在让图形在响应式设计中表现时遇到了困难。

有问题的图形是菜单栏下方的主图像，位于 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;
}

我的期望

我希望主图像通过以响应式方式在宽度上收缩来调整到视口的大小高度方面，而不是保持在图形的自然高度和宽度，因为图形的自然高度和宽度溢出了视点。当我在大屏幕显示器上查看主页时，主图形（自然宽度 = 663px 和自然高度 = 616px）按设计显示。但是，当我在 iPhone 上查看主页时，主图形以其原始的自然宽度和高度显示在屏幕右侧，大约 80% 的图形显示在屏幕外，无法看到。

对我来说，响应式意味着图形会缩小以正确使用视点，并使其宽高比调整到视口。

我无法让它工作。我在这里做错了什么？

屏幕截图

大屏幕显示器（看起来与设计一致）

移动设备（图形未调整大小）

谢谢。