如何调整标题内的徽标链接大小答案

【问题标题】：How to resize a logo link inside a header如何调整标题内的徽标链接大小
【发布时间】：2019-10-21 21:25:45
【问题描述】：

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

将 with 或 height 设置为 100% 是经常发生的事情。我试过用这个，但它不起作用。 “object-fit”也应该是一个选项，但我的 IDE 无法识别此属性。当我使用“浮动：左；”对于徽标，它一直向左移动，但它也超出了标题（嗯，看起来确实如此）并将我的其他 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;
}

【问题讨论】：

标签： html css

【解决方案1】：

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

有时调整徽标的大小可能会缩小并且看起来不太好。取而代之的是两个不同的徽标（用于移动设备的小徽标 = 小尺寸）应该可以满足您的目的。

【讨论】：

我只需要这个网站的桌面版本。问题不仅在于移动版本。我希望徽标自动调整大小-> 更小，因此它适合标题。（我的错，我用了“响应式”这个词。）
所以，我假设您在尝试调整浏览器窗口大小时遇到了这种情况。 HTML:

网站标题/名称

CSS: @media (max-width: 480px) { .logo{ display: block;宽度：120px；左边距：自动； } } .header { 背景颜色：#f1f1f1;填充：20px；文本对齐：居中； } .logo{ 显示：块；左边距：自动；最大宽度：100%；高度：自动； }

嗯，这只会使图像变小。它仍然在标题上方。

【解决方案2】：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<style>

.header { 
background-color: #f1f1f1; 
padding: 20px; 
text-align: center; 
} 
.logo{ 
float: left;
display: block; 
margin-left: auto; 
width:250px;
height: 50px;
height: auto; 
}

</style>
</head>
<body>

<div class="header">

            <a href="index.html" class="logo">
                <img width="200px" height="150px"  src="https://groceriesandveggies.in/wp-content/uploads/2017/09/gv_small_logo.jpeg">
            </a> 
            <div class="header-right">
                <h1>Website title/name</h1>     
            </div>
        </div>
</body>
</html>

【讨论】：

网站标题/名称