如何将图片保留在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;
}