在html / css mobile中設置圖片尺寸時，寬度/高度百分比是否基於屏幕尺寸？

Question

我在Oracle Apex jmobile查詢項目的中間，那里有一個HTML頁面。 此頁面包含以下圖像代碼：

<center>
<img src="#WORKSPACE_IMAGES#Logo.svg" align="center">
</center>

和CSS遵循：

.img {
width:"50%",
height:"50%"
}

當我處於縱向視圖時，此代碼將圖像設置為正確的尺寸，但是當我在手機上切換為橫向時，圖像不會重新調整尺寸。 那么百分比法是正確的選擇還是有其他方法？ 我還嘗試獲取屏幕的寬度和高度，並將它們除以運氣。

Answer 1

使用img

不是.img

img{
   width:"50%",
   height:"50%"
}

您尚未在img標簽上設置class =“ img”的類

Answer 2

如果要使尺寸相對於視口，也可以使用視圖高度和視圖寬度（vh）+（vw），盡管它不支持 ％

Answer 3

如1l13v所說：

css中的百分比相對於父容器，在您的情況下，相對於中心元素尺寸

響應式圖像的一種很好的解決方案，它可以使它們相對於尺寸自動調整大小：

center img{
  width:100%;
  height:auto;
}

計算出的寬度取決於父容器的寬度。

例：

center{
  width:50%;
  margin:0 auto;
  display:block;
}