Question

我是HTML编码的初学者，我试图只显示图像的一部分。我用这种方式显示图像：

<img id="theImg" style="width:100%;" src="https://'myimage.jpg'" />

但我真的不知道如何只显示图像的左下角。甚至可以在不使用裁剪图像制作新图片的情况下使用它？

Answer 1

您可以使用具有背景图像的div元素，然后只对这个div应用一些css更改，如下所示：

#theImg {
  height: 200px;
  width: 200px;
  display: block;
  background-image: url('https://myimage.jpg');
  background-position: bottom left;
}

JsFiddle：https://jsfiddle.net/kekwdy2L/3/

Answer 2

将background-image与background-position：

一起使用

#my-image {
  background-image: url('https://i0.wp.com/lovecuteanimals.objects.cdn.dream.io/wp-content/uploads/2016/01/Cute-Netherland-Dwarf-Rabbit.jpg?w=1160');
  background-position: -220px -80px;
  display: inline-block;
  width: 200px;
  height: 200px;
}

<div id="my-image"></div>

Answer 3

如果您知道图像的大小，可以将其放入容器中，该容器的宽度和高度只有图像的一半，并使用position: absolute;和下面显示的设置：

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.container img {
  position: absolute;
  bottom: 0;
  left: 0;
}

<div class="container">
  <img src="http://placehold.it/600x400/fa0" />
</div>

Answer 4

<style>
div {
height: height you want;
width: width you want;
background-image:url("image you want");
</style>
<div class="div"></div>

Answer 5

如果您知道图像的大小（以像素为单位），则可以使用css clip。

注意，clip在css规范中已被正式弃用，但其替换clip-path目前的浏览器支持率非常低。

实现裁剪的另一种方法是将<img>标记放在<div>内，如this答案所示。

HTML显示图像左下角的四分之一

5 个答案: