Css 图像和绝对位置DIV

我想问一个关于css定位和图像的问题

我设置了一个户外说唱者div，它的边距与body元素相等

我的问题是，当我把一个图像放在这个OuterRapper容器中时，它会溢出，这是我不想看到的

我想在它的户外说唱歌手div容器中保留图像。这里是css

 #outerwrapper {
  position: absolute;
  height: 100%;
  width: 100%; 
  border: solid 2px green;
  margin-left:30px;
  margin-right:30px;
  margin-top:30px;
  margin-bottom:30px;
  height: calc(100% - 60px);
  width: calc(100% - 60px);

}

下面是正在工作的JSFIDLE代码

---

非常感谢

您忘记为

添加css类。img responsive

.img-responsive {max-width:100%;height:auto}

这将保持图像的比例。您还可以将

overflow:hidden

添加到您的

#外套包装器中

如果您不太在意保持图像的完整比例，只想让它覆盖整个区域，请使用以下方法：

.img-responsive {width:100%;height:100%;}

只需将
overflow:hidden
添加到您的
#外套包装上即可

为了帮助将来验证您的代码，如果您在项目中添加了另一个图像，其中添加了高度和宽度属性，但也使用了img响应类。但仅此示例并不需要。引导“img responsive”类还包括“display:block”；谢谢您的回答。当你做溢出隐藏。图像未显示100%的高度。如果你注意到，它就会被切断。图像在此容器中应显示100%。@Ranahussan如果是这种情况，并且您不希望图像保持其比例，请将.img responsive to.img responsive{宽度：100%；高度：100%；}内的css更改为.img responsive to.img responsive{宽度：100%；高度：100%；}谢谢各位，不过我希望图像保持其比例，这里是示例站点。我想要类似的布局。谢谢你的回答。当你做溢出隐藏。图像未显示100%的高度。如果你注意到的话，它会被切断。谢谢这个技巧奏效了，但是当你缩小窗口图像宽度时，开始切断，我该如何以响应的方式处理这个问题。谢谢