如何使我的标题图像正确响应？

Question

我正在尝试使用一个非常好的高级Wordpress主题将一个网站放在一起为朋友.我已经为主题付了钱,但设计师无法帮助定制.

该网站目前位于www.zerocarbonfood.co.uk/test/.最初的主题有一个小的左对齐标志,但我的朋友喜欢这个大的全宽度,我觉得效果更好.现在的问题是,我在iPad或iPhone上看到它(肖像)徽标太大并将其搞砸了.在主题选项中,它被定义为922px宽度和168px高度.我不能在那里放一个百分比值.我可以在CSS中覆盖这个吗？

任何帮助都会感激不尽,因为我有点超出我的深度.

Answer 1

尝试使用max-width: 100%; height: auto;它应该可以正确调整图像大小。

Answer 2

处理它的最简单方法是将徽标图像插入内联而不是背景图像.这样你就可以将CSS应用到img元素本身;

HTML

<div id="logo-container"><a href="http://www.zerocarbonfood.co.uk/test"><img src="http://www.zerocarbonfood.co.uk/test/wp-content/uploads/2013/07/wide-logo-2.png" alt="" /></a></div>

CSS

#logo-container img {
   width: 100%;
   height: auto;
}

Answer 3

尝试使用 % 而不是 px。这样，您的图像将随着页面大小而缩放。

在你的 HTML 中，你可以尝试类似的东西

<img src="logo.png" width="80%" height="80%"/>

这将随着屏幕宽度而缩放。当然，您还想缩放高度以保持纵横比。

仅供参考，当我一直缩小时，该网站在我的 Android 手机上看起来不错。