Question

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

我有一个外包装div我将它的边距设置为与body元素相等。

我的问题是当我将图像放在这个外包装容器中时，它溢出了我不想要的。

我想在其外包装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);

}

这是jsfiddle代码。

https://jsfiddle.net/magtechpro/s3r2cf8r/3/

非常感谢

Answer 1

您忘了为.img-responsive

添加css类

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

这将保持图像比例。您还可以将overflow:hidden添加到#outerwrapper。

如果你不太关心保持图像的比例完整但只是想让它覆盖该区域，请改用：

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

Answer 2

只需将overflow: hidden添加到#outerwrapper

即可

https://jsfiddle.net/nt2n9xu6/

图像和绝对位置DIV

2 个答案: