如何在css中使图形图像响应答案

【问题标题】：How to make a graphic image responsive in css如何在css中使图形图像响应
【发布时间】：2015-10-03 05:34:11
【问题描述】：

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

有问题的图形是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;
}

我的期望

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

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

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

屏幕截图

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

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

谢谢。

【问题讨论】：

标签： css image responsive-design

【解决方案1】：

HTML/CSS 代码似乎都很好。很可能在一个/多个容器元素上设置了固定宽度，找到它并将其添加/更改为max-width，或在必要时在媒体查询中调整它。

还要确保设置<meta name="viewport" content="width=device-width,initial-scale=1"> 或类似的响应式元标记。

【讨论】：

谢谢@Pangloss——你帮我解决了。我有一个不相关的 div 容器设置为 width:1020px;

【解决方案2】：

您可以将图形设置为background-image 并将属性background-size:contain 添加到图像容器中。这将自动拉伸容器内的整个图形（保持纵横比）。然后，如果你想让你的图像容器适应视口，你可以在上面使用viewport units，比如设置width:50vmin;height:50vmin;。

【讨论】：

那么你是说在 HTML5 和 CSS3 中没有办法来编码和设置图像样式以响应并调整到视口？必须始终使用 background-images?
这只是一个建议。当然，您也可以在 img 元素上应用视口单位。当指定高度或宽度时，它们固有地保持纵横比，因此您可以执行img.gc-responsive-img{height:30vh;} 之类的操作。如果它不能立即工作，也许我们应该启动一个 Fiddle。