如何裁剪右侧的图像以匹配包含元素的宽度？答案

【问题标题】：How to crop an image on the right to match the width of a containing element?如何裁剪右侧的图像以匹配包含元素的宽度？
【发布时间】：2014-04-21 07:21:19
【问题描述】：

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

如果我有这样的图像：

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

我希望得到这样的结果：

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

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

我该怎么做？

【问题讨论】：

不用担心图像。不过，一些代码通常会有所帮助。对于问题所在，我有一些想法。您可以在jsfiddle.net 上发布您的代码或制作并保存一些东西吗？

标签： html css image crop

【解决方案1】：

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

例如：

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

See JSFiddle demo

【讨论】：

位已修改 - 宽度为 100% 以匹配 div 大小。谢谢！