小さい画像の部分に白い画像の「オーバーフロー」を隠すには

Question

divには、十分にズームインした後に350pxから250pxに変更するdivがありますが、このdiv内の画像（実際の画像は<img>、幅は100％ 、背景ではない）は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の自動イメージクラスの代わりに