Css 剪辑图像然后调整大小

Question

我得到了一张大图片，其中包含用于悬停更改的不同元素。 图片很大，所以我想剪掉部分图片，然后调整大小。

img {
  clip: rect(0px, 1124px, 186px, 38px);
  width:500px;
  height:auto;
  position:absolute;
}

但是，最终结果中显示的图像只是在 1124px 边界处截断的图像的缩小版本。 (它甚至没有制作)因为我将它设置为 500 像素。 但我想要的只是将图像的裁剪部分宽度调整为 500 像素。

什么是最好的解决方案？

用视觉解释在: https://jsfiddle.net/0m939vmn/

Answer 1

今天，您可以使用 object-fit 和 object-position 为实现这一目标，position然后是可选的:

img {
  object-fit: none;
  /* will not be resized */
  object-position: 0 0;
  /* clip to your coordonates*/
  width: 500px;
  height: auto;
}

img+img {
  object-fit: none;
  /* will not be resized */
  object-position: 0 -1050px;
  /* clip to your coordonates*/
}

img+img+img {
  object-fit: none;
  /* will not be resized */
  object-position: -1050px -1050px;
  /* clip to your coordonates*/
}

img+img+img+img {
  object-fit: none;
  /* will not be resized */
  object-position: -1050px 0;
  /* clip to your coordonates*/
}
img+img+img+img+img {
  object-fit: none;
  /* will not be resized */
  object-position: 50% 50%;
  /* clip to your coordonates*/
}

the following image has width and height of 2000px.<br /> I'd like to have the red square only at a width and height of 500px.
<br />
<br />

<img src='https://s14-eu5.ixquick.com/cgi-bin/serveimage?
url=https%3A%2F%2Fvignette.wikia.nocookie.net%2Fmalware%2Fimages%2Fb%2Fba%2FWindows.png%2Frevision%2Flatest%3Fcb%3D20150730065805&sp=6789a53a9c28eb071f118bf9d294ffe0' />
<img src='https://s14-eu5.ixquick.com/cgi-bin/serveimage?
url=https%3A%2F%2Fvignette.wikia.nocookie.net%2Fmalware%2Fimages%2Fb%2Fba%2FWindows.png%2Frevision%2Flatest%3Fcb%3D20150730065805&sp=6789a53a9c28eb071f118bf9d294ffe0' />
<img src='https://s14-eu5.ixquick.com/cgi-bin/serveimage?
url=https%3A%2F%2Fvignette.wikia.nocookie.net%2Fmalware%2Fimages%2Fb%2Fba%2FWindows.png%2Frevision%2Flatest%3Fcb%3D20150730065805&sp=6789a53a9c28eb071f118bf9d294ffe0' />
<img src='https://s14-eu5.ixquick.com/cgi-bin/serveimage?
url=https%3A%2F%2Fvignette.wikia.nocookie.net%2Fmalware%2Fimages%2Fb%2Fba%2FWindows.png%2Frevision%2Flatest%3Fcb%3D20150730065805&sp=6789a53a9c28eb071f118bf9d294ffe0' />
<img src='https://s14-eu5.ixquick.com/cgi-bin/serveimage?
url=https%3A%2F%2Fvignette.wikia.nocookie.net%2Fmalware%2Fimages%2Fb%2Fba%2FWindows.png%2Frevision%2Flatest%3Fcb%3D20150730065805&sp=6789a53a9c28eb071f118bf9d294ffe0' />

---

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

The object-fit CSS property specifies how a replaced element, such as an <img> or <video>, should be resized to fit its container.

---

https://developer.mozilla.org/en-US/docs/Web/CSS/object-position

The object-position CSS property determines the alignment of the selected element inside its box.

---

剪辑和还调整大小，除了 clip() 之外，您还需要使用 background-position 和 background-size 来松开 img 标签。或在 div 中调整大小和 inbricate img 并作为最质朴的方法溢出，我不发布示例，因为我相信你可以或已经想出这些..