html - 从特定一侧裁剪调整大小的图像

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 框架。这样，当浏览器调整到特定尺寸时，您的页面将自动使用正确的图像。