如何将图像保存在 div 容器中

Posted 2023-03-06

【中文标题】如何将图像保存在 div 容器中

【英文标题】：How to keep image within div container

【发布时间】：2019-10-22 08:17:37

【问题描述】：

我正在尝试编辑网站上的图像。我注意到的问题是，当我将显示器缩小到足够小的尺寸时，图像会超出它们“所在”的 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" >
   </div>
	<h5>Angie Pope</h5>
  <p>Operations</p> 
</div>

我希望图像会保留在 div 容器中，但我也看到了它

将其顶部移出容器， 让它留在容器内，而是在灰色背景的底部上方浮动一定数量的像素。

【问题讨论】：

给图片max-width: 100%

她还在漂浮。

以 codepen 或 fiddle 的形式给我整个代码，所以我知道确切的问题

找到了解决方案。感谢您的帮助

如果代码将来由于某些颜色问题而无法工作，请添加 .team-member img background: #F8F8F8; 通过删除背景：$color_bg_grey;内部团队成员...。希望这可以帮助。代码可能需要改进，因为它有点老旧。

【参考方案1】：

@Gh05d 的答案很有用，但它可能会拉伸您的图像（我假设您不想要）。您可以使用以下方法来避免这种情况。

div 
    width:300px;
    height:300px;    
    overflow:hidden;
    position:relative;

div img 
    position:absolute;

【参考方案2】：

你可以试试图片上的object-fit属性：

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