html - 当我向 Logo 添加超链接时，它会忽略 CSS 大小调整

Question

这是我的代码。使用 bootstrap 4.1 框架:

<div class="container">
  <div class="d-none d-md-block">
    <div class="d-flex justify-content-center">
      <img class="logo" src="logo2.png">
      <p>
      <p>
  </div>
</div>

还有 CSS:

.logo { width: 50%; height: 50%;}

所以我随便在图片上添加了一个超链接到我的主页，如下所示:

<div class="container">
  <div class="d-none d-md-block">
    <div class="d-flex justify-content-center">
      <a href="home.html"><img class="logo" src="logo2.png"></a>
        <p>
        <p>
    </div>
  </div>
</div>

而且 Logo 变得怪异，变得倾斜且看起来很奇怪。我尝试在网格容器周围移动链接，但这是不行的。还尝试将样式保持在 <img> 内标签。还是不行 :(

Answer 1

% 单元设置相对于父元素的宽度和高度的宽度和高度。

首先，定义父元素的宽度和高度值 (在您的代码中 = a) 并向其中添加 logo 类。 (参见下面的示例)

.logo {
  width: 50%; /* parent element's width */
  height: 50% /* parent element's height */
}

.logo>img {
  width: 100%; /* img's width */
  height: 100% /* img's height */
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class="container">
  <div class="d-none d-md-block">
    <div class="d-flex justify-content-center">
      <a href="home.html" class="logo"><img src="logo2.png" /></a>
      <p></p>
    </div>
  </div>
</div>