javascript - 在不同桌面分辨率下以相同大小显示图像

Question

我需要显示一张信用卡大小的卡片图像，它必须在所有桌面分辨率上都具有相同的大小，这意味着它需要以与物理卡相同的宽度和高度显示图像。

我研究了将物理 mm 转换为 px 并调整图像大小是多么容易，但这比最初想象的要复杂得多。

有人有想法么？

score 3 · Accepted Answer

使用mm（作为毫米）而不是pxCSS 宽度和高度。据我所知，CSS支持这一点。然而，在本文档中，指出“绝对长度单位高度依赖于输出介质，因此不如相对单位有用。”。但它尽可能接近精确，恕我直言。

score 1 · Accepted Answer

我不确定这是否是一个跨浏览器的解决方案，但它应该适用于大多数浏览器。

HTML：

<img id="image" src="img.jpg" />

CSS：

#image {
    height:inherit;
    width:inherit;
}

这应该使您的图像具有与父 DIV 相同的宽度和高度。因此，您的图像必须包含在具有图像确切高度和宽度的 div 中。

score 0 · Accepted Answer

谢谢大家，我在调查后怀疑这是不可能的。以毫米为单位的尺寸似乎不能始终如一地工作，所以我可能不得不承认失败。

score 0 · Accepted Answer

您现在可以使用视口单位，例如 vw、vh、vmin、vmax：

img{
   width: 2vw;
   height: 2vw;
}

现在，如果您以任何分辨率查看图像，这将是相同的。

4 回答 4