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适用于和无 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)它只是在视觉上这样做，所以从文档流的 Angular 来看，它的大小/位置仍然如上例所示。

这意味着 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需要应用相同的修复程序。