Как изменить размер привязанного изображения в css?

Question

У меня есть изображение, которое также является ссылкой на другую страницу, но изображение слишком большое. Я попытался уменьшить его на 40%, уменьшив ширину класса shirt-pic на 40%, это не сработало.

<a class="shirt-pic" href="pages/original.html"><img src="images/original.png" alt="shirt"/></a>

.shirt-pic {
    width:40%
    height: auto;
}

Кроме того, я разместил ссылку на изображение lo go по центру вверху экрана слишком велик, мне тоже нужно изменить его размер, но я уже использую свойство ширины для его центрирования, потому что в школах w3 сказано, что он должен работать на 50%.

<span id="brand-logo"><a href="index.html"><img src="images/logo.png" alt="Logo"/></a></span>

#brand-logo {
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
    background-color: FFFFFF;
}

Должен ли я просто изменить его размер в html? Нет ли способа сделать это с css?

Answer 1

Теги привязки имеют тип отображения по умолчанию inline, поэтому вы не можете напрямую изменять их размер. Вы можете нацелить изображение, хотя:

.shirt-pic img {
    width: 40%;
    height: auto;
}

<a class="shirt-pic" href="pages/original.html"><img src="https://i.stack.imgur.com/1oG1X.jpg" alt="shirt"/></a>

Answer 2

<a href="pages/original.html"><img class="shirt-pic" src="images/original.png" alt="shirt"/></a>

вам нужно дать класс в изображении

.shirt-pic {
    width:200px;
    height: auto;
}

или

<a class="shirt-pic" href="pages/original.html"><img src="images/original.png" alt="shirt"/></a>

.shirt-pic img{
    width:40%
    height: auto;
}