div 中的 HTML/CSS 拉伸锚点答案

【问题标题】：HTML/CSS Stretch anchor in divdiv 中的 HTML/CSS 拉伸锚点
【发布时间】：2014-08-07 15:52:36
【问题描述】：

我有following code 并且想要在框中的任何地方都没有锚点：

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%;
}

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

我怎样才能做到这一点。

【问题讨论】：

stackoverflow.com/help/how-to-ask
您能否更好地描述您的情况，并在此处发布给您带来问题的特定 css 类（感谢您进行演示，但我不太明白您在寻找什么)
我希望现在能更好地理解。对不起...

标签： html css anchor

【解决方案1】：

为元素a设置宽度、高度和display:block

【讨论】：

【解决方案2】：

检查一下：

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

演示：http://www.cssdesk.com/p5Cqd

【讨论】：

此解决方案在调整窗口大小时会出现问题，因为图像的纵横比没有保留。