从特定一侧裁剪图像调整大小答案

【问题标题】：Crop an image on resize from one specific side从特定一侧裁剪图像调整大小
【发布时间】：2023-03-22 02:05:01
【问题描述】：

是否可以使用 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;
}

正如您从笔中看到的那样，当您减小浏览器的大小时，图像会在保持居中的同时被裁剪。我想裁剪图像，同时保持图像的左侧。

以前有人遇到过这个问题/解决过这个问题吗？

【问题讨论】：

标签： html css

【解决方案1】：

你也许可以用 javascript 做一些事情，但对我来说这听起来像是一个 hacky 解决方案。相反，我建议使用两个版本的图像，一个裁剪一个不裁剪，并使用媒体查询或像 bootstrap 这样的 css 框架。这样，当浏览器调整到特定尺寸时，您的页面将自动使用正确的图像。

【讨论】：

【解决方案2】：

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

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

【讨论】：