在图形内部创建图像链接 - 图像大小更改

Question

当我用锚点包裹图像时，图像本身变得非常小。我有一个图形内部的图像，我正在使用flex-box，我不确定如何防止图像大小的变化。

＆＃13;

＆＃13;

milkNum = milkNum -1

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是我如何解决的，

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

Answer 2

您可以为img内部的foo标记添加css。这为100px img提供了.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>

ms_billing