如何在较小的div中隐藏白色图像“溢出”

Question

我有一个div，一旦你放大到足够高，从350px变为250px，但是这个div内的图像（一个100％宽度的实际<img>，而不是背景）将创建空白在div下，按下它下面的thext。我通过在Chrome中使用inspect元素找到了这个，如下图所示。我以为overflow:hidden;会摆脱它，但事实并非如此。

我还认为这与另一个问题有关，当我在手机上按这些图像（Chrome应用程序）时，即使在div之外，它们也会突出显示为蓝色。这个蓝色突出显示甚至超过了其他div，并且不会被div本身的边缘切断。

我可以做一些带有负边距的技巧，但这会将文本放在图像的空白后面，即使它在div之外，使文本不可见。这也可以使用一些带有z-index的东西来修复，但触摸时不能解决手机上的问题。

现在的问题是;如何保持图像的全宽，但“剪切”掉在div之外的部分，这样文字就不会被推下来？

.photo-box {
  overflow:hidden;
  position:relative;
  text-align:center;
}

.photo-box img {
  width:100%;
  height:auto;
  min-height:250px;
  overflow:hidden;
  -webkit-backface-visibility:hidden;
  -webkit-tap-highlight-color:rgba(255,255,255,0); 
  -webkit-transform:translateZ(0) scale(1.0, 1.0);
  -webkit-transition:all 0.4s;
  -moz-transition:all 0.4s;
  -o-transition:all 0.4s;
  transition:all 0.4s;
}

<div class="photo-box pure-u-1 pure-u-md-1-2 idx">
  <img src="https://wsx.moe/boxed/boxresources/idx/idx0.png" alt="Music Collection">
</div>
<div class="photo-box pure-u-1 pure-u-md-1-2 idx idtxt">
  <p>~<br>Text</p>
</div>

Answer 1

请尽量给予身高：100％;而不是在你的CSS中自动映像类