显示图像css html的一部分[重复]答案

【问题标题】：display a part of image css html [duplicate]显示图像css html的一部分[重复]
【发布时间】：2016-09-24 11:13:35
【问题描述】：

我有一张width:300px, height:400px;的图片

我的容器大小是width:168px, height:208px;

我想只显示图像的一部分，以便它可以填充容器。

喜欢： 假设左上角是0px 0px 右下角是原始图像的300px 400px。我想显示来自10px 0px(top-left) to 200px 208px(bottom-right) 的图片，使其适合容器。

如何在 css 中做到这一点？

【问题讨论】：

标签： html css

【解决方案1】：

如果它们是两个独立的元素，您可以在容器上设置overflow: hidden。如果您使用background-image 属性设置图像，则将background-size 属性的值设置为cover，将background-position 的值设置为top center

编辑：

考虑到来自您的 cmets 的新信息，您应该如何对元素进行排序，如下所示：

<div class="cut-image">
  <img class="image-to-cut">
</div>

这样设计它们：

.cut-image {
  width: 168px;
  height: 208px;
  overflow: hidden;
  position: relative;
}

.image-to-cut {
  position: absolute;
  left: -10px;
  top: 0;
}

【讨论】：

不，我没有使用背景属性。怎么处理img标签？以及它的图片库..如何将通用 css 应用于所有人？
只需创建一个包含 div 并设置它的宽度和高度，然后在其中放置 img 标记并将包含 div 的overflow 属性设置为hidden。
我想裁剪图像，使图像显示为：从左边 10px 到左边 178px（水平）和从顶部 0px 到顶部 208px（垂直）
我已编辑我的帖子以反映您的 cmets。

【解决方案2】：

您可以使用background: url(placeholder.img) x y no-repeat; 来执行此操作。您需要用左上角的值 (px) 替换 x 和 y。此外，您需要将 div 容器设置为 overflow: hidden;!

.gallery-image {
  background-position: 10px 0px;
  background-repeat: no-repeat;
}

&lt;div class="gallery-image" style="background-image: url("placeholder.img");"&gt;&lt;/div&gt;

【讨论】：

它是一个图片库。我必须为所有人设置一个通用的 css 属性。没有背景属性怎么办？
每张图片的 x 和 y 值是否不同？
所有图像均为 300X400。我想裁剪图像，使图像显示为：从左侧 10 像素到左侧 178 像素（水平）和从顶部 0 像素到顶部（垂直）208 像素
我在上面编辑了我的帖子。您可以使用此设置定义一个类或 id，然后在 div 容器中更改图像。

【解决方案3】：

将其用作背景图片：

div {
  width: 168px;
  height: 208px;
  background: url("http://lorempixel.com/200/300/") no-repeat left -10px;
}

&lt;div&gt;&lt;/div&gt;

制作 div overflow: hidden

div {
  width: 168px;
  height: 208px;
  overflow: hidden;
}
img {
  position: relative;
  top: -10px;
}

<div>
  <img src="http://lorempixel.com/200/300/" />
</div>

【讨论】：

我有一个图片库，每个 300X400。我必须裁剪每个图像，以便图像显示为：从左侧 10 像素到左侧 178 像素（水平）和从顶部 0 像素到顶部（垂直）208 像素
@Abhishek 对你有好处...