在图形中制作图像 a link - 图像大小发生变化

Question

嗨，当我用锚点包裹我的图像时，图像本身变得非常小。我有一个图形内部的图像并且我正在使用 flex-box，我不太确定如何保持图像大小不改变。

.foo{
display:flex;
flex-direction:row;
justify-content:space-around;
}

<figure class="foo">
<a href="#"><img src="#"></a>
<a href="#"><img src="#"></a>
<a href="#"><img src="#"></a>
</figure>

Answer 1

您可以为 foo class 添加 css for img 标签。这为每个 img.

提供了 100px 高度和宽度

.foo{
display:flex;
flex-direction:row;
justify-content:space-around;
}

.foo img{
height:100px;
width:100px;
}

<figure class="foo">
<a href="#"><img src="https://i.stack.imgur.com/CE5lz.png"></a>
<a href="#"><img src="https://i.stack.imgur.com/CE5lz.png"></a>
<a href="#"><img src="https://i.stack.imgur.com/CE5lz.png"></a>
</figure>

Answer 2

我是这样解决的，

.foo{
display:flex;
flex-wrap: wrap;
margin-left: 20px;
width: calc(100% + 20px);
}

.foo a{
flex: 1 1 280px;
margin-left: 20px;
margin-bottom: 20px;
}

.foo a img{
width:100%
height: auto;
}

<figure class="foo">
<a href="#"><img src="https://i.stack.imgur.com/CE5lz.png"></a>
<a href="#"><img src="https://i.stack.imgur.com/CE5lz.png"></a>
<a href="#"><img src="https://i.stack.imgur.com/CE5lz.png"></a>
</figure>

.foo{
display:flex;
flex-direction:row;
justify-content:space-around;
}

<figure class="foo">
<a href="#"><img src="#"></a>
<a href="#"><img src="#"></a>
<a href="#"><img src="#"></a>
</figure>

.foo{
display:flex;
flex-direction:row;
justify-content:space-around;
}

.foo img{
height:100px;
width:100px;
}

<figure class="foo">
<a href="#"><img src="https://i.stack.imgur.com/CE5lz.png"></a>
<a href="#"><img src="https://i.stack.imgur.com/CE5lz.png"></a>
<a href="#"><img src="https://i.stack.imgur.com/CE5lz.png"></a>
</figure>

在图形中制作图像 a link - 图像大小发生变化

Making an image inside a figure a link - image size changes

html

anchor

image

figure

flexbox