如何在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;
}

我的期望

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

对我而言，响应意味着图形缩小以正确消耗视点并使其宽高比适应视口。

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

屏幕截图

大屏幕显示器（看起来像设计）

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

感谢。

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;。