css - 如何使用 CSS 将图像调整为具有原始分辨率的特定尺寸？

Question

我遇到了一种情况，需要单独使用 HTML 和 CSS 以原始分辨率显示调整到指定尺寸的图像。有什么办法可以做到这一点。

我试过下面的代码:

代码:

<div style="background-image: url(img.jpg); background-position: center; background-size: 50px; background-repeat:no-repeat; width:100px; height:100px;">

这是正确的方法吗？还是有其他选择。

Answer 1

如果您将图像放大，则必须用东西填充额外的空间。

您可以拉伸(stretch)图像以填充更大的尺寸，这必须通过多种算法中的任何一种从原始像素推断新像素。执行此操作时，您无法获得“最初的清晰度”，尽管根据您的情况和您认为可以接受的内容，您可以获得“足够好”。

要保持相同的清晰度/分辨率，您必须用其他东西填充额外的空间，而不是拉伸(stretch)图像 - 一种可能性是平铺图像以填充空间，但当然这不是同一张图像。对于背景图像，当图像被设计为平铺时，平铺通常是可以接受的。

你不能从无到有。