如何隱藏白色圖像「溢出」在一個較小的div

-1

我有一個div在350px到250px的高度變化一旦足夠放大，但然後該div內的圖像（實際<img> 100％寬度，而不是背景）將在div下創建空白，並推下它下面的文本。我在Chrome中使用檢查元素髮現了這一點，如下圖所示。我認爲overflow:hidden;會擺脫它，但它沒有。如何隱藏白色圖像「溢出」在一個較小的div

我也認爲這與另一個問題有關，即當我在手機上按下這些圖像（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>

來源

2017-10-11 wariostarx

請提供代碼的[Minimal，Complete，and Verifiable示例]（https://stackoverflow.com/help/mcve）。否則，這是不可能排除故障的。 – Tijmen

在它後面添加了css。 html已經在文中描述過了。 – wariostarx

請儘量給予高度：100％;而不是在您的css中自動映像類

來源

2017-10-11 15:04:17 vic

我剛纔試過了，它沒有放大時使圖像小於div，在div內創建空白。 – wariostarx

嘗試將圖像的vertical-align屬性設置爲vertical-align：bottom; vertical-align：top;或垂直對齊：中間; 並設置要顯示的圖像的顯示屬性：block; – vic

幾乎做到了這一點，我也刪除了最小高度，現在看起來更有前途。它還沒有消除課程的亮點，但我會更多地鼓搗。至少圖像不會將文本壓低。謝謝您的意見。 – wariostarx

如何隱藏白色圖像「溢出」在一個較小的div

回答

相關問題