使图形内的图像成为链接 - 图像大小发生变化答案

【问题标题】：Making an image inside a figure a link - image size changes使图形内的图像成为链接 - 图像大小发生变化
【发布时间】：2017-12-31 22:38:48
【问题描述】：

嗨，当我用锚点包裹图像时，图像本身变得非常小。我有一个图形内的图像，我正在使用 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>

【问题讨论】：

请发布足够多的代码来重现问题（例如包括图片）。

标签： html image flexbox anchor figure

【解决方案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>

【讨论】：

【解决方案2】：

您可以为 foo 类中的 img 标签添加 css。这为每个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>

【讨论】：