Question

我正在使用移动WebView，我正在全屏显示图像。在某些情况下，如果图像的宽度大于图像的高度，我可以通过将图像旋转90度来防止图像过度撕裂。

我知道我可以使用css transform属性旋转图像，但我无法弄清楚如何对图像的大小进行数学运算。

使用http

从远程位置提取所有图像

编辑：我可能遗漏了一些重要信息!!

我正在使用ionic，根据离子调节器，我需要访问的这个特定元素位于$ionicModal中并且实际上不是dom元素。因此我无法使用document.getElementById。

Answer 1

var element = document.getElementById("yourElement")

这会返回您想要的DOM元素（在本例中为图像）。使用对象的width和height属性，可以获得图像的宽度和高度（显然）。

您需要检查.width是否大于.height，然后设置元素的transfrom属性

Answer 2

从远程地址加载图像时，请等待图像加载，然后获取宽度和高度：

$('#myimage').on('load',function(){
   var img = document.getElementById('myimage'); 
   var width = img.clientWidth;
   var height = img.clientHeight;
   if (width>height){
     alert('Width is greater');
   }
   else{
      alert('Height is greater');
      //And do rotation if this is the right place
   }
   
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id="myimage">

如果您使用的是离子，则可以使用以下代码按ID访问该元素：

var $myimage=angular.element(document.getElementById("myimage"));
$myimage.on('load',function(){//Same  as above}

Answer 3

你必须使用JavaScript来添加一个类似于“宽图像”的类别。使用以下代码：

Observable

然后使用媒体查询根据需要转换这些图像。或者，只有当Windows宽度位于特定断点处作为替代选项时，才可以添加此类。

如果可能的话，如果你的所有图像都可以给出一个类，你可以通过类选择器来获取它们。

如果在离子模式中，您可以获得高度和宽度信息，并且可以有条件地添加“宽图像”信息。然后这应该工作。

如果宽度大于高度，则旋转图像

3 个答案: