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

Question

我正在使用移动网络浏览量，并且正在整理图像。在某些情况下，如果图像的宽度大于图像的高度，则可以通过旋转图像90度来防止图像撕裂。

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

使用http

从远程位置拉出所有图像

编辑：我可能已经排除了一些重要的信息！

我使用的是ionic，我需要访问的此特定元素是在$ionicModal中，实际上不是DOM元素。因此，我无法在上面使用document.getElementById。

Answer 1

var element = document.getElementById("yourElement")

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

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

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">

如果您使用的是 IONIC 可以使用以下代码访问ID元素：

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

Answer 3

您将必须使用JavaScript添加类SAI SAI SAI SAID'wide图像'，并在以下代码中添加：

Function tagImage {
      document.getElementByTagname('img').foreach(function (element) {
    if(element.width > element.height) {
       element.className += ' wide-image';
    }
 }
}

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

另外，如果可能的话，如果您的所有图像都可以给出一个课程，则可以由类选择器获得。

如果在离子模态中，您具有可用的高度和宽度信息，并且可以有条件地添加"宽图像"类，那么也应该有效。