HTML/CSS Stretch anchor in div - html

Question

I have the following code and want the anchor everywhere in the box not only at the image:
HTML:
<p style="clear:left" />
<div class="reference_container">
<div class="reference_box reference_box_geraete">
<a href="google.de">
<img src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/Hans.NETMVCJeffAtwoodandhistechnicalteam_1349C/stackoverflow-logo-250_3.png"/>
</a>
</div>
<div class="reference_box reference_box_geraete">
<a href="google.de">
<img src="http://www.johndscomputers.com/wp-content/uploads/2014/02/200px-Apple_logo_black.svg_.png"/>
</a>
</div>
<div class="reference_box reference_box_geraete">
<a href="google.de">
<img src="http://www.johndscomputers.com/wp-content/uploads/2014/02/200px-Apple_logo_black.svg_.png"/>
</a>
</div>
<div class="reference_box reference_box_geraete">
<a href="google.de">
<img src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/Hans.NETMVCJeffAtwoodandhistechnicalteam_1349C/stackoverflow-logo-250_3.png"/>
</a>
</div>
</div>
<p style="clear:left" />
CSS:
.reference_container {
display: flex;
}
.reference_box {
border: 1px solid #ddd;
border-radius: 5px;
margin: 1%;
position:relative;
overflow: hidden;
padding: 15px;
white-space: nowrap;
display:inline-block;
}
.reference_box_geraete {
width: 22%;
/*box-sizing: border-box;*/
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.reference_box_geraete img {
vertical-align: middle;
max-width: 100%;
max-height: 100%;
}
The problem is that I don't get the anchor to stretch to the whole surrounding div.
I tried to remove the div and make the anchor as block-element, but then the images are not stretched correctly (doesn't keep aspect-ratio) when resizing the browser window.
How can I achieve this.

Answer 1

set width , height and display:block for element a

Answer 2

check this:
<p style="clear:left" />
<div class="reference_container">
<a class="reference_box reference_box_geraete" href="google.de">
<img src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/Hans.NETMVCJeffAtwoodandhistechnicalteam_1349C/stackoverflow-logo-250_3.png"/>
</a>
<a href="google.de" class="reference_box reference_box_geraete">
<img src="http://www.johndscomputers.com/wp-content/uploads/2014/02/200px-Apple_logo_black.svg_.png"/>
</a>
<a href="google.de" class="reference_box reference_box_geraete">
<img src="http://www.johndscomputers.com/wp-content/uploads/2014/02/200px-Apple_logo_black.svg_.png"/>
</a>
<a href="google.de" class="reference_box reference_box_geraete">
<img src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/Hans.NETMVCJeffAtwoodandhistechnicalteam_1349C/stackoverflow-logo-250_3.png"/>
</a>
</div>
<p style="clear:left" />
Demo: http://www.cssdesk.com/p5Cqd