html - 如何调整标题内 Logo 链接的大小

Question

我做了一个标题。它仅包含 Logo 和网站标题。 Logo 是指向主页的链接。我的问题是我似乎无法让 Logo 一直位于标题的左侧，我希望它调整大小以适合标题(而不是:标题因 Logo 而变大)。我将 Logo 和网站名称/标题放在两个不同的 div 中。

将宽度或高度设置为 100% 是经常发生的事情。我曾尝试使用它，但它不起作用。“object-fit”也应该是一个选项，但我的 IDE 不识别这个属性。当我使用“float: left;”时对于 Logo ，它一直向左移动，但它也从页眉中移出(好吧，看起来确实如此)并将我的其他 div 推到标题/页面内容下方的右侧。

HTML:

        <div class="header">
            <a href="index.html" class="logo">
                <img src="image.png">
            </a>
            <div class="header-right">
                <h1>Website title/name</h1>     
            </div>
        </div>

CSS:

.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

.logo{
  display: block;
  margin-left: auto;
  max-width: 100%;
  height: auto;
}

Answer 1

实现此目的的一种方法是使用两张图片，一张用于桌面版，另一张用于移动版。使用 window.navigator，您可以确定您是在移动设备上还是在桌面设备上。

有时调整 Logo 大小可能会缩小并且看起来可能不太好看。取而代之的是使用两个不同的 Logo (移动设备上的小 Logo = 小尺寸)应该符合您的目的。