-1

Hi when I wrap my image with a anchor the image itself becomes really small. I have the image inside of a figure and I am using flex-box, I am not really sure how to keep the image size from changing.

.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>
Kirk Kimsey
  • 21
  • 1
  • 5

2 Answers2

1

Here how i solved,

.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>
Mohideen bin Mohammed
  • 18,813
  • 10
  • 112
  • 118
Kirk Kimsey
  • 21
  • 1
  • 5
0

You can add css for img tags for inside foo class. This gave 100px height and width for each 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>
Murat Seker
  • 890
  • 2
  • 14
  • 26