Question

我网站上的“rh”徽标是垂直响应的，即完全适合高大的薄窗口，但不会调整到宽阔的短窗口。任何人都可以帮助我使徽标响应宽度和高度吗？

这是网站......（需要加载一下）

http://rhwebdesign.co.uk/

这是我的CSS：

img { 
    height: auto; 
    max-width: 100%; 
    vertical-align: middle;
}

Answer 1

在横向模式下（480x320），有一个脚本没有正确计算边距的大小。

<div class="container hero-content" style="margin-top: -97.5px;">

查看main.js中的这个函数：

heroContent.css({
            "margin-top" : topContentMargin+"px"
        });

这是：

topContentMargin = (heroHeight - contentHeight) / 2,
heroHeight = windowHeight,
contentHeight = heroContent.height(),

我还没有真正调查过它为什么不正确地抄袭它。我的猜测是，对于横向模式，heroContent太高了，因为媒体查询max-width：100％时图像变为441px高。所以它试图增加一个负余量来补偿。

我的建议是删除英雄内容大小调整的jQuery计算，并仅使用css和媒体查询应用大小。

编辑：

您需要更具体地了解您的CSS。 Learn some more about css specifity。您应该在顶部包含最大的媒体查询，因此较小的媒体查询将优先于底部。让事情变得更轻松。恕我直言，我不会使用比iPad更大的查询。即。 1,024像素。虽然您应该尽可能在新设备上进行测试。

您需要为每种特定设备尺寸指定视频的高度。我现在无法告诉，但也许jquery正在确定部分高度，所以现在css正在确定视频高度。

所以在样式表的底部，试试这个。

div#bgVideo.skrollable.skrollable-between video#video_background {
    min-height:940px !important;
}

@media (max-width: 480px) {
.hero-logo img {
    max-width:55%; /*looks nice at 480 */
    padding:20px;
    }
div#bgVideo.skrollable.skrollable-between video#video_background {
    min-height:320px !important;
    }
}

@media (max-width: 320px) {
div#bgVideo.skrollable.skrollable-between video#video_background {
        min-height:480px !important;
    }
}

但理查德，说实话，你应该自己进行故障排除和测试。如果你不尝试，你将如何学习？记住，萤火虫是你最好的朋友:)）

Answer 2

要非常具体并解决有关徽标的问题，请考虑设置相对于窗口高度的最大高度。

你有：

img { 
    height: auto; 
    max-width: 100%; 
    vertical-align: middle;
}

.hero-logo img {
    max-width: 100%;
    min-height: 100%;
    padding: 20px;
}

要缩放徽标，请添加到后一个块：

max-height: 100vh;

这会将图像的最大高度设置为视口高度的100％，这似乎是您所需要的。请注意，它下面有一些文本，不会显示，因为它是包含在H5中的文本。这两行是68px高（40px填充加上文本的28px）。因此，您可以将上述内容调整为：

max-height: calc(100vh - 68px);

徽标高度无响应

2 个答案: