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查看）：

＆＃13;

.container {
  width: 200px;
  height: 200px;
  overflow: hidden;
}

img {
  margin-top: -500px;
  margin-left: -392px;
}

＆＃13;

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

＆＃13;

添加：您可以根据需要制作任何尺寸的容器，使用定义的宽度和高度调整（整个）图像的大小/比例：auto并使用margin-left和margin-right的负值定义摘录。它需要一些试验和错误，但您可以使用我描述的方法以任何大小显示图像的任何部分。

BTW：图片精灵也是这样的，如果你google＆＃34;图像精灵＆＃34;，你会发现很多例子。

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

3 个答案: