从左起的div中的CSS裁剪img [英] CSS cropping img in a div from left

问题描述

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

If an image overflows its container and I want to crop it, it's easy enough from the right (the default action is that the image is anchored to the top left of the div) and there are various ways of cropping to the centre.

我想做的是从左边裁剪.换句话说，就是将图片锚定在封闭div的顶部和右侧.

What I would like to do is crop from the left. In other words so that the image is anchored to the top and right of the enclosing div.

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

Needless to say I need a solution that works without knowing the div width and although I will know the image width, I don't see how this helps.

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

I can see the background image solution to this issue but it would be nice to use the image as an element so I can apply retina images. It would also be nice not to have to use Javascript.

有什么主意吗?

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

If I come up with a partial solution I will paste the code but at the moment I'm unsure how to proceed.

推荐答案

使用flexbox并调整对齐方式:

Use flexbox and adjust the alignment:

.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>

这篇关于从左起的div中的CSS裁剪img的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！