Когда я добавляю гиперссылку на мой логотип, он игнорирует размеры 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>

И логотип волнуется и становится наклонным и странным. Я попытался переместить ссылку вокруг контейнера сетки, но это не пойдет. Также пытался сохранить стиль внутри <img> тег. Все еще нет нет:(

Answer 1

% unit устанавливает ширину и высоту относительно ширины и высоты родительского элемента.

Сначала определите значение ширины и высоты для родительского элемента (в вашем коде = 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>