时间戳

首页 > 解决方案 > 当我向我的徽标添加超链接时，它会忽略 CSS 大小

html - 当我向我的徽标添加超链接时，它会忽略 CSS 大小

问题描述

这是我的代码。使用引导 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>

标志吓坏了，变得倾斜和奇怪。我尝试在网格容器周围移动链接，但这是不行的。还尝试将样式保持在<img>标签内。还是不行:(

标签： htmlcssbootstrap-4

解决方案

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

首先，定义父元素的宽度和高度值（在您的代码 = 中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>

推荐阅读