从一个特定侧调整大小时裁剪图像

Question

是否可以使用CSS控制图片裁剪的方向？ 我有一个产品镜头，它在图像的左侧有主题。 我需要能够在浏览器调整大小时不裁剪左侧大小。

现在我将图片设置为背景图片，以便控制缩放和裁剪，但方向裁剪似乎不是一件事。

以下是codepen的链接： http://codepen.io/samratrocks/pen/LxGjjR 以下是我在DIV上使用的CSS代码。

.img-holder {
    height: 300px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto auto;
}

从笔中可以看出，当您减小浏览器的大小时，图像会在保持中心的同时被裁剪。我想裁剪图像，同时保持图像的左侧。

有没有人有这个问题/以前解决了这个问题？

Answer 1

您可以在javascript中执行某些操作，但这对我来说听起来像是一个hacky解决方案。相反，我建议有两个版本的图像，一个是裁剪的，一个不是，并使用媒体查询或像bootstrap这样的CSS框架。这样，当浏览器调整到某个尺寸时，您的页面将自动使用正确的图像。

Answer 2

原来这是一个相当愚蠢的问题。 我只是将位置改为左侧并将大小保持为自动，现在图像仅从右侧进行裁剪。

.img-holder {
    background-position: left center;
    background-size: auto auto;