如何將圖像保存在div容器中

Question

我正在嘗試在網站上編輯圖像。 我注意到的問題是，當我將顯示縮小到足夠小的尺寸時，圖像會超出它們所處的div。 我該如何防止這種情況發生？

我試過玩定位，調整高度/寬度，以及更改顯示首選項。 position: static使圖像不會移到div容器之外，但是圖像現在懸停在div的底部之上。

 .team-member { background: $color_bg_grey; min-height: 320px; width: 100%; position: relative; } .team-member img { width: 90%; margin: 0 auto; position: absolute; bottom: 0; left: 0; right: 0; opacity: 0.9; } .team-member.ian { position: relative; max-height: 100%; max-width: 100%; } .team-member.ian img { position: relative; bottom: 0; margin: 0; } 

 <div class="col-xs-6 col-sm-3 col-md-2"> <div class="team-member ian"><img class="photo_fit" src="/img/team_photos/Angie.png" alt="Ian"> </div> <h5>Angie Pope</h5> <p>Operations</p> </div> 

我希望圖像保留在div容器中，但我也可以看到它

• 將它的頂部放在容器外面，
• 讓它留在容器內，而是漂浮在灰色背景底部上方的相當數量的像素。

Answer 1

你可以試試imgage上的object-fit屬性：

.photo_fit {
  height: 320px;
  object-fit: contain;
}

Answer 2

@ Gh05d的答案很有用，但它可能會拉伸你的形象（我認為你不想要）。 您可以使用以下內容來避免這種情況。

div {
    width:300px;
    height:300px;    
    overflow:hidden;
    position:relative;
}
div img {
    position:absolute;
}