html - 如何在右侧裁剪图像以匹配包含元素的宽度？

Question

我在互联网上搜索过，但找不到确切的解决方案。

如果我有这样一张图片:

=====/     /====================================

我希望得到这样的结果:

=====/     /=====

未调整大小，未居中，仅在右侧裁剪以匹配包含 div 的宽度。

我该怎么做？

Answer 1

实现此目的的一种方法是使用图像作为 crop 元素的背景，而不是自身内部的单独元素。

例如:

.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
    background: url('some-path/some-image-to-be-cropped');
}

See JSFiddle demo