Question

我一直在使用视口单元为我的网站设置图像的宽度和高度。我想知道是否有办法将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;
}

Answer 1

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

不，因为vw或vh是相对值（相对于当前设备屏幕尺寸），而像素尺寸是绝对价值。您只能在 Per-instance 的基础上获取像素值，而不是基于适合每个屏幕大小。

另见this post as a potential answer。然后，此Javascript可以在客户端设备上加载页面，然后反馈vw / vh / 等。值的绝对像素的翻译，但这些像素值将更改每个不同的屏幕尺寸/ densty以查看页面。

您可以尝试使用min-width / max-width / 等值并将其设置为所需的像素大小。这将设置最小和最大大小，视口相对大小可以然后缩小。

#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;
}

处理图像时视口单位为像素

1 个答案: