Question

如果图像溢出其容器并且我想对其进行裁剪，那么从右边开始就很容易了（默认操作是将图像锚定到div的左上方），并且有多种裁剪到中心的方法。

我想做的是从左侧裁剪。换句话说，以便图像固定在封闭div的顶部和右侧。

不用说，我需要一个不知道div宽度就可以工作的解决方案，尽管我会知道图像的宽度，但我看不出这有什么帮助。

我可以看到解决此问题的背景图像解决方案，但最好将图像用作元素，以便可以应用视网膜图像。不必使用Javascript也很不错。

有什么主意吗？

如果我提出了部分解决方案，我将粘贴代码，但此刻我不确定如何继续。

Answer 1

使用flexbox并调整对齐方式：

.box {
  width:100px;
  height:100px;
  margin:20px;
  display:inline-flex;
  vertical-align:top;
  /* overflow:hidden uncomment this to hide the overflow*/
  border:1px solid;
  align-items:flex-start;
}
img {
 opacity:0.4;
}

<div class="box">
<img src="https://picsum.photos/150/150?image=1069" >
</div>
<div class="box" style="align-items:center;justify-content:center;">
<img src="https://picsum.photos/150/150?image=1069" >
</div>
<div class="box" style="align-items:flex-end;">
<img src="https://picsum.photos/150/150?image=1069" >
</div>
<div class="box" style="align-items:flex-end;justify-content:flex-end;">
<img src="https://picsum.photos/150/150?image=1069" >
</div>

Answer 2

Flexbox可以做到

div {
  margin: 1em auto;
  width: 200px;
  border: 5px solid red;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  /* toggel to see overflow */
}

img {
  display: block;
  opacity: .5/* to show overflow */
}

<div>
  <img src="http://www.fillmurray.com/460/300" alt="">
</div>

从左起的div中的CSS裁剪img

2 个答案: