div中的HTML/CSS拉伸锚

我希望锚在盒子里的每一个地方，而不仅仅是在图片上：

HTML:

问题是我没有让锚延伸到周围的整个div。 我试图删除div并将锚定作为块元素，但是图像没有正确拉伸，在调整浏览器窗口大小时无法保持纵横比

如何实现这一点。

设置宽度、高度和显示：元素a的块检查：

<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" />

---

演示：

你能更好地描述一下你的情况吗，并在这里发布给你带来问题的特定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%;
}

<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" />