Когда я добавляю гиперссылку на мой логотип, он игнорирует размеры CSS

Question

Вот мой код.Использование платформы начальной загрузки 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>.Все еще нет нет: (

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>