处理图像时以像素为单位的视口单位答案

【问题标题】：viewport unit to pixels when dealing with images处理图像时以像素为单位的视口单位
【发布时间】：2017-06-02 16:57:59
【问题描述】：

我一直在使用视口单元为我的网站设置图像的宽度和高度。我想知道是否有办法将 vh/vw 转换为像素，这样我就可以将图像调整为那些特定的像素。以下是我的代码/测量值。

#left > img:nth-of-type(1) {
  height: 65vh;
  width: 78vw;
}
#left > img:nth-of-type(2) {
  height: 90vh;
  width: 78vw;
}
#left, #right {
  display: inline-block;
}
#top-right, #bottom-right {
  display: block;
}
#top-right > img:nth-of-type(1) {
  width: 75vw;
  height: 100vh;
}
#top-right > img:nth-of-type(2) {
  width: 45vw;
  height: 100vh;
}
#bottom-right > img:nth-of-type(1) {
  width: 70vw;
  height: 55vh;
}
#bottom-right > img:nth-of-type(2) {
  width: 50vw;
  height: 55vh;
}

【问题讨论】：

Fwiw，您可以确定任何元素的当前像素大小，例如使用JavaScript 中的 offsetWidth 和 offsetHeight 属性。

标签： css pixels image-scaling viewport-units

【解决方案1】：

我想知道是否有办法将 vh/vw 转换为像素

不，因为vw 或vh 是相对值（相对于当前设备屏幕尺寸），而像素尺寸是绝对值。您只能在 Per-instance 基础上获取像素值，而不是在 fits-every-screen-size 基础上获取像素值。

另见this post as a potential answer。然后，此 Javascript 可以将页面加载到客户端设备上，然后反馈 vw / vh / etc. 值的绝对像素值的翻译，但这些像素值会在每个不同的地方发生变化查看页面的屏幕尺寸/密度。

您可以尝试使用 min-width / max-width / etc. 值并将它们设置为所需的像素大小。这将设置 viewport-relative 尺寸可以设置的 minimum 和 maximum 尺寸然后在之间进行缩放。

#left > img:nth-of-type(2) {
   height: 90vh;
   width: 78vw;
   min-width: 120px; /* Set these as you require */
   max-width: 640px;
   min-height: 140px;
   max-height: 700px;
}

【讨论】：