时间戳

首页 > 解决方案 > CSS从左侧裁剪img

css - CSS从左侧裁剪img

问题描述

如果一个图像溢出它的容器并且我想裁剪它，从右边很容易（默认操作是图像锚定到 div 的左上角）并且有多种方法可以裁剪到中心。

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

不用说我需要一个在不知道 div 宽度的情况下工作的解决方案，虽然我会知道图像宽度，但我看不出这有什么帮助。

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

有什么想法，蜂巢思维？

如果我想出部分解决方案，我将粘贴代码，但目前我不确定如何继续。

标签： cssimage

解决方案

使用 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>

推荐阅读