图像表现得好像它只是原始图像的一部分

Question

对不起，如果这有点令人困惑，但我会尽力解释。 总而言之，我希望图像仅根据图像的一小部分表现。

例如，想象一个太阳系的图像，它的宽度为 1000 像素，高度为 1000 像素。太阳是图像的一部分，位于距顶部 150 像素和距左侧 150 像素的位置，形状为 250 像素的正方形。

我希望图像的太阳部分占据一个完整的 div 类似的东西：

img { width: 100% }

如果我这样做，太阳系的完整图像将完全嵌入到 div 中。它不是以太阳为中心的。

为了实现我想要的，我必须这样做：

img {
position: absolute;
width: 400%;
top: some pixel value;
left: some pixel value;
}

但是当图像所在的原始DIV不固定时，这很令人头疼。

所以我想知道是否存在允许设置图像左上角值和右下角值的东西，并且让图像的其余部分溢出并以与设置边界的图像部分相同的方式进行调整。

Answer 1

在 CSS 中使用 background-image 而不是 <img /> 标记将使这变得相当简单并且完全响应：

.sun {
  width: 25%;
  height: 0px;
  padding-top: 25%;
  background-image: url(https://i.imgur.com/3lHAYdT.png);
  background-size: 400%; /* 400% * 250px == 1000px */
  /* Edit: a little confused, but looks like you need 20% instead.  Trying to figure out why. */
  background-position: 20% 20%; /* 15% of 1000px = 150px */
}

<div class="sun"></div>

如果您更喜欢使用<img /> 标签，您可以与position: absolute; 和overflow: hidden; 一起使用

.sun {
  width: 25%;
  height: 0px;
  padding-top: 25%;
  position: relative;
  overflow: hidden;
}

.sun img {
  width: 400%;
  height: auto;
  position: absolute;
  top: -60%; /* 60% is 15% of 1000px * 400% */
  left: -60%;
}

<div class="sun"><img src="https://i.imgur.com/3lHAYdT.png" alt="universe" /></div>

Answer 2

你也可以使用object-fit:

object-fit CSS 属性指定应如何调整替换元素（例如 <img> 或 <video>）的大小以适合其容器。

img {
  vertical-align: top;
  object-fit: none;
  padding: 5px;
  border: solid;
  margin: 5px;
  background: linear-gradient(60deg, tomato, gold, silver, purple, brown, turquoise, lightgray);
}

img:nth-child(2) {
  width: 130px;
  height: 125px;
  object-position: 0 0;
}

img:nth-child(3) {
  width: 140px;
  height: 45px;
  object-position: -130px 0;
}

img:nth-child(4) {
  width: 80px;
  height: 100px;
  object-position: -160px -50px;
}

img:nth-child(5) {
  width: 140px;
  height: 150px;
  object-position: -250px -30px;
}

img:nth-child(6) {
  width: 80px;
  height: 70px;
  object-position: 0 -230px;
}

img:nth-child(7) {
  width: 70px;
  height: 75px;
  object-position: -70px -125px;
}

img:nth-child(8) {
  width: 80px;
  height: 80px;
  object-position: -325px -260px;
}

img:nth-child(9) {
  width: 180px;
  height: 65px;
  object-position: -200px -370px;
}

img:nth-child(10) {
  width: 65px;
  height: 65px;
  object-position: -380px -370px;
}

img:nth-child(11) {
  width: 240px;
  height: 140px;
  object-position: 0 -295px;
}

i {
  font-size: 0.5em;
}

<h1>testing object-fit <i>(full image below)</i></h1>
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />
<hr/>
<h2>original</h2>
<img src="https://teachingphysics.files.wordpress.com/2010/04/solar-system.jpg" />

object-position 与背景位置相同

Answer 3

只需使用具有图像摘录的预期大小和overflow: hidden; 的容器。然后使用margin-top 和margin-left 的负值根据预期摘录定位图像，如下所示。

示例（原图可在https://www.pics.edu.pk/Students/images/48/newcertificate_sample.jpg查看）：

.container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

img {
  margin-top: -500px;
  margin-left: -392px;
}

<div class="container">
  <img src="https://www.pics.edu.pk/Students/images/48/newcertificate_sample.jpg">
</div>

附加：您可以将容器设置为您想要的任何大小，使用定义的宽度和高度调整（整个）图像的大小/缩放：自动并使用左边距和右边距的负值定义摘录。这需要一些试验和错误，但您可以使用我描述的方法以任何大小显示图像的任何部分。

顺便说一句：图像精灵也是这样工作的，如果你用谷歌搜索“图像精灵”，你会发现很多例子。