Question

我的图片为width:300px, height:400px;

我的容器尺寸为width:168px, height:208px;

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

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

如何在css中执行此操作？

Answer 1

将其用作背景图片：

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

制作div overflow: hidden

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

编辑：

根据您的评论中的新信息，您应该做什么来订购这样的元素：

<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;
}

Answer 3

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

＆＃13;

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

＆＃13;

<div class="gallery-image" style="background-image: url("placeholder.img");"></div>

＆＃13;

显示图像css html的一部分

3 个答案: