CSS响应性中<a>标签和图像之间的关系

Question

我正在尝试调整放置在标签中的图像（.logo）的大小。但是每当我缩小图像时，图像的尺寸就会变小，但标签的尺寸保持不变。并且图像和下一个元素 (h1) 之间的空间受到干扰。

此内容是 Header 的子项。我正在尝试将其创建为导航栏。

代码在这里...

HTML

<header>
    <a href="index.html"><img src="Images/Genshine_logo.png" class="logo"></a>
<a href="index.html">
      <h1>Characters Cards</h1>
    </a>
  </header>

CSS

header {
    background-color: #4B002C;
    color: #000000;
    padding: 10px;
    height: 14vh;
    width: 100%;
    display: flex;
    align-items: center;
}

.logo {
    height: 12vh;
    width: 26vw;
}

h1 {
    margin: 2px 0 0 40px;
    padding: 0vh 68px 0px 0vw;
    font-weight: bold;
    font-size: 5vw;
    text-align: center;
    color: #ffc660;
}

媒体查询

@media (max-width: 480px) {
    header {
        height: auto;
        padding: 10px;
    }

    .logo {
        width: 55%;
        height: auto;
    }

    h1 { 
        font-size: 5vw;
        margin: 0;
    }
}

在此输入图片描述

我期望图像和 h1 之间不会出现不必要的间隙。

我什至尝试调整标签大小，但这也行不通。

Answer 1

删除图片的

width: 26vw;

。 img就是这个宽度，但是里面的图片包含在里面，避免变形或者裁剪。
如果你同时设置高度和宽度，你可以得到这样的东西，如果你只设置一个，另一个会适应以避免变形或裁剪。