CSS：图像溢出

Question

我试图使图像适合黑色边框div，无论它们是否旋转。我试过溢出：隐藏，最大高度：100％和对象适合：包含但静止图像溢出。与变换。我不知道下一步该尝试什么。需要帮助

<div style="border: 1px solid">
  <img img-fix-orientation="model.post.image" ng-src="{{model.post.image ? model.post.image : model.post.sub_category.name == 'Service' ? 'images/service.png' : 'images/thing.png'}}" style="max-width:100%;" alt="post image" />
</div>

Answer 1

注意，object-fit缺乏良好的浏览器支持，并且有一些选项可以解决这个问题，不过在这里我想说明contain如何应用以及w {o transform 的

要在img元素未剪切的情况下显示图片，请使用object-fit: contain，将width和/或height设置为100%，这样就可以了垂直和水平图像都没有溢出。

.wrapper {
  display: inline-block;
  height: 150px;
  width: 250px;
  padding: 5px;
  margin: 5px;
  background: lightgray;
}

.wrapper img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

<div class="wrapper">
  <img src="http://placehold.it/150x300/f00"/>
</div>

<div class="wrapper">
  <img src="http://placehold.it/300x150/00f"/>
</div>

现在，当您应用transform: rotate(90deg)时，它只是可视它会这样做，所以从文档流的角度来看，它的大小/位置仍然如上例所示。

这意味着wrapper和img都不知道任何更改，因此在水平img中将水平wrapper旋转为垂直时会出现溢出

为了能够旋转这样的img并使其垂直适合，transform需要知道wrapper之前的纵横比，以便能够补偿溢出，以及在这个样本中，它是已知的（150px / 250px = 0.6），因此通过向变换添加scale，我们可以避免溢出。

.wrapper {
  display: inline-block;
  height: 150px;
  width: 250px;
  padding: 5px;
  margin: 5px;
  background: lightgray;
}

.wrapper img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  transform: rotate(90deg) scale(0.6);
}

<div class="wrapper">
  <img src="http://placehold.it/300x150/00f"/>
</div>

对于垂直img中的垂直wrapper，需要应用相同的修正。

Answer 2

div必须具有设定的宽度和高度才能知道要考虑溢出的内容。

如果你说div是500px宽，那么溢出将适用。

Answer 3

有几种方法可以完成这项工作。您可以为包含元素指定高度，同时将overflow-y属性设置为hidden。 （必须设置一个高度......没有设置一个，浏览器怎么知道要考虑溢出？）

.container {
  border: 1px solid black;
  height: 100px;
  overflow-y: hidden;
}

.img {}

<div class="container">
  <img src="http://via.placeholder.com/150x150"/>
</div>

<p>Image element is 150px tall, but the containing element is only 100px tall</p>

您还可以将img设置为背景图像，然后使用background-size: contain属性。 这会保留图片的原始尺寸：

.container-sm {
  background: url('https://i.stack.imgur.com/pHXH4.png') center center no-repeat;
  background-size: contain;
  border: 1px solid black;
  height: 50px;
}

.container-lg {
  background: url('https://i.stack.imgur.com/pHXH4.png') center center no-repeat;
  background-size: contain;
  border: 1px solid black;
  height: 200px;
}

<div class="container-lg"></div>
<br/>
<div class="container-sm"></div>

<p>Image is fully contained in div, regardless of image or div size.</p>

希望这有帮助！

Answer 4

为你的div提供id，让我们说

#divid{
border: 1px solid black;
height: X px;
width: X px;
}

#divid img{

height: 100%;
width: 100%;

}

这将使你的图像适合div。