如何在css中使图形图像具有响应性

我很难让图形在响应性设计中表现出来

正在讨论的图形是位于菜单栏下方的主图像

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>

我的期望

我希望主图像以响应的方式（宽度方向和高度方向）收缩，以适应视口的大小，而不是保持在图形的自然高度和宽度（溢出视点之外）。当我在大屏幕显示器中查看主页时，主图形（自然宽度=663px，自然高度=616px）将按设计显示。然而，当我在iphone上查看主页时，主图形以其原始的自然宽度和高度显示在屏幕右侧，大约80%的图形显示在屏幕外，看不见

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

我不能让它工作。我做错了什么

屏幕截图

大屏幕显示器（外观与设计相同）

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

---

谢谢。

您可以将图形设置为背景图像，并将属性添加到图像容器中。这将自动拉伸容器内的整个图形（保持纵横比）。然后，如果希望图像容器调整到视口，可以在其上使用，如设置

width:50vmin；高度：50vmin
HTML/CSS代码似乎都很好。很可能在一个/多个容器元素上设置了固定的宽度，找到它并将其添加/更改为
最大宽度
，或者根据需要在媒体查询中调整它

还要确保设置
或类似的响应元标记。
那么，你是说在HTML5和CSS3中，没有办法对图像进行编码和样式设置，使其响应并调整到视口？必须始终使用
背景图像
？这只是一个建议。当然，您也可以在
img
元素上应用视口单位。当指定高度或宽度时，它们固有地保持纵横比，因此您可以执行类似于
img.gc responsive img{height:30vh；}
的操作。如果现在不行，也许我们应该开始拉小提琴。谢谢@Pangloss——你帮我解决了。我将一个不相关的div容器设置为
width:1020px
div.gc-responsive-div,
img.gc-responsive-img {
  max-width: 100% !important;
}