我们如何在图像的左侧修剪

Question

当我尝试对图像进行修剪时，图像仅在右侧修剪，而不在左侧修剪。

如何在图像的左侧修剪？

我正在使用此CSS：

.media {
  padding: 39% 0;
}

Answer 1

您尝试使用object-fit属性。

.media {
  object-fit: cover;
}

这将保留图像的原始宽高比并覆盖整个元素。元素外的部分将被裁剪。

Answer 2

有多种方法可以做到这一点。

1 。您可以使用clip属性，让您可以根据需要剪辑动画。

.media {
  position: absolute;
  clip: rect(0px,60px,200px,0px); // order of values like other css rules are cockwise (top, right, bottom, left)
}

2 。或者，您可以使用object-fit，然后添加一个object-position属性来设置图像的顶部和左侧位置（您可以使用正值将图像推到右侧和底部，并使用负值将图像推到顶部和左侧） 。然后，您可以玩width和height来隐藏图像的右侧和底部。

.media {
    object-fit: cover;
    object-position: -20px 20px; // px or %
    width: 100px;
    height: 100px;
}

object-fit属性可以具有以下值：

• 填充：这是默认设置。替换内容的大小可填充元素的内容框。如有必要，将拉伸或压缩物体以使其适合
• 包含：缩放替换后的内容以保持其宽高比，同时适合元素的内容框
• 封面：在填充元素的整个内容框时，替换内容的大小可保持其纵横比。该对象将被裁剪以适合
• 无：替换的内容不会调整大小
• 缩小：内容的大小就像未指定内容或包含内容一样（将导致较小的具体对象大小）

3。。如果您使用的是CSS Sprite技术，最好将图像设置为<img>标签的背景，然后使用background css属性进行裁剪。

.media {
    left: 63px;
    width: 44px;
    background: url(img_navsprites.gif) -47px 0;
}