显示图像css html的一部分 [英] display a part of image css html

问题描述

我有一张 width:300px，height:400px;

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

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

I want to display only a part of the image so that it can fill the container.

点赞:假设左上角是原始图片的 0px 0px .我想显示从 10px 0px(左上角)到200px 208px(右下角)的图片，以使其适合容器.

like: Suppose top left corner is 0px 0px bottom right corner is 300px 400px of the original image. I want to display picture from 10px 0px(top-left) to 200px 208px(bottom-right) such that it fits in the container.

如何在CSS中执行此操作?

推荐答案

将其用作背景图像:

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

<div></div>

使div 溢出:隐藏

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

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

这篇关于显示图像css html的一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！