在圖形中製作圖像鏈接 - 圖像大小變化

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>