在图形中制作图像链接 - 图像大小变化

Question

嗨，当我用图像包装图像时，图像本身变得非常小。我有一个图形里面的图像，我使用弹性框，我不知道如何保持图像大小不变。

.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{ 
 
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标签添加CSS的内部foo类。这给了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>