包装图像的弹性框锚标记具有巨大的宽度

Question

当我将图像包装在锚标签中时，锚标签的宽度很大。这是您可以看到的笔：Codepen 链接。

这是 HTML：

<div class="gallery">
<a href="https://cdn-another71.pressidium.com/wp-content/themes/another71-child/images/ninja_assault.png"><img src="https://cdn-another71.pressidium.com/wp-content/themes/another71-child/images/ninja_assault.png" alt="Photo 1 of three dangerous ninjas"></a>
<a href="https://cdn-another71.pressidium.com/wp-content/themes/another71-child/images/ninja_assault.png"><img src="https://cdn-another71.pressidium.com/wp-content/themes/another71-child/images/ninja_assault.png" alt="Photo 2 of three dangerous ninjas"></a>
<a href="https://cdn-another71.pressidium.com/wp-content/themes/another71-child/images/ninja_assault.png"><img src="https://cdn-another71.pressidium.com/wp-content/themes/another71-child/images/ninja_assault.png" alt="Photo 1 of two dangerous ninjas"></a>
</div>

这是 CSS：

.gallery {
display: flex;
flex-wrap: wrap;
align-items: center;
max-height: 100%;
justify-content: space-around;
}
.gallery a {
text-decoration: none;
margin: 0;
padding: 0;
}
.gallery img {
max-width: 15%;
margin: 10px;
border: 3px solid #000000;
box-shadow: 3px 3px 3px #22211D; 
}

如果图像只是图像，则它们在 flex 容器中按预期显示，没有问题。但是当我将它们包装在锚标签中时，它们的宽度如此之大，我不知道如何解决它。如果我为锚点设置宽度，它会保持锚点 CSS 框的纵横比，因此图像最终的宽度为 10 像素。我完全迷失了。

Answer 1

我认为您应该更改调整图像大小的方式。 例如，如果您删除".gallery img"的最大宽度并替换为 300px 的简单宽度，它可以正常工作:)

看看这里 ： https://codepen.io/benCat/pen/LJvXZw?editors=1100

.gallery img {
width: 300px;
margin: 10px;
border: 3px solid #000000;
box-shadow: 3px 3px 3px #22211D; 
}