Question

当我将图像包装在锚定标签中时，锚定标签会变得很大。这是笔，因此您可以看到它：Codepen link。

以下是HTML：

这是CSS：

<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>

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

Answer 1

我认为您应该更改调整图像大小的方式。如果您删除“ .gallery img”的最大宽度并替换为300px的简单宽度，则效果很好:)

在这里看看：https://github.com/akquinet/vaangular/blob/master/vaangular/src/main/resources/de/akquinet/engineering/vaadin/vaangular/angular/NgTemplate.js

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

包装图像的Flexbox锚标签宽度很大

1 个答案: