css - 响应式 Logo - 菜单重叠 Logo

Question

我在 Joomla 2.5 的模板上使用 Gantry 该模板在第一点设置为托管一个小图像作为 Logo ，但我希望它在宽度方面更改为更大的图像。

因此，现在它在 ipad 上不起作用，因为它开箱即用，菜单出现在它的顶部。

我希望 Logo 随着页面 View 变大而调整大小但不与菜单重叠。你能帮我解决这个问题吗？

网址是:http://174.142.32.91/~thanos/example/

提前致谢

尼克

Answer 1

您不能使用固定尺寸并获得您正在寻找的响应式、调整大小的质量。此外，如果要调整大小，则不应使用背景图像。要修复您的代码，很简单。

将背景图像作为 html 图像添加到您的

<div class="rt-block logo-block">
    <a href="/~thanos/example/" id="rt-logo">
        <img src="http://174.142.32.91/~thanos/example/images/example.png" /> // This is your image
    </a>
</div>

接下来，从您的 CSS 中删除以下内容:

#rt-logo{background:url("../images/logo/logo1.png") no-repeat;}
#rt-logo{margin:-9px 0 0 0;width:172px;height:84px;display:block;}