Making ein Bild in einer Figur ein Link - Bildgröße ändert sich

Question

Hallo, wenn ich mein Bild mit einem Anker wickeln das Bild selbst wird wirklich klein. Ich habe das Bild in einer Figur und ich benutze Flex-Box, ich bin mir nicht sicher, wie man die Bildgröße davon abhält sich zu verändern.

.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

hier, wie ich gelöst,

.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

Sie können nach innen foo Klasse CSS für img Tags hinzufügen. Dies ergab 100px Höhe und Breite für jeden 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>