Question

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

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

有人有什么想法吗？

Answer 1

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

Answer 2

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

HTML：

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

CSS：

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

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

Answer 3

谢谢大家，我在调查后怀疑这是不可能的。尺寸以毫米为单位看起来不够稳定，所以我可能不得不承认失败。

Answer 4

您现在可以使用viewport units，例如vw，vh，vmin，vmax：

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

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