在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%"
}

你没有设置一个类=＆＃34; img＆＃34;在你的img标签上

Answer 2

如果要相对于视口设置大小，您还可以使用视图高度和视图宽度（vh）+（vw），尽管它不像supported那样％

Answer 3

正如1l13v所说：

  css百分比中的

是相对于父容器的，在你的情况下是   中心元素尺寸

响应式图像的一个很好的解决方案是让它们相对于它们的大小进行自动调整：

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

计算出的宽度取决于父容器的宽度。

示例：

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