0

I'm working with a mobile WebView and I'm fullscreening an image. In some scenarios I can prevent the image from getting too torn apart by rotating the image 90 degrees if the width of the image is greater than the height of the image.

I know I can rotate the image using the css transform property, but I can't quite figure out how to do the math for the size of the image.

All of the images are pulled from a remote location using http

EDIT: I may have left out some important information!!

I am using ionic and this specific element that I need to access is in an $ionicModal and is not actually a dom element, according the ionic moderators. Therefor I cannot use document.getElementById on it.

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
Hobbyist
  • 15,888
  • 9
  • 46
  • 98
  • What don't you know? How to get the width or height with javascript or how to compare them? – nicael Jun 16 '16 at 20:48
  • I have no idea what "not a DOM element" means. If it's not in the DOM, then it's not going to be visible so I think they are mistaken. – dmeglio Jun 16 '16 at 21:23
  • 2
    Open your webpage, press F12, check the elements on the webpage and search for this specific element. I honestly doubt it's not part of the site... – Bálint Jun 16 '16 at 21:28
  • @Bálint Any recommendations on how to do this via the iOS browser? This is a mobile application with many native features. It does not run on desktop. – Hobbyist Jun 16 '16 at 22:29
  • @Hobbyist if you use Chrome, then by pressing the mobile icon on the top left corner, you can emulate any type of cellphone – Bálint Jun 16 '16 at 23:45
  • @Bálint that will emulate the size of the mobile, it won't let you run a mobile app. He will need to use something like Ripple for Chrome – dmeglio Jun 17 '16 at 14:26

3 Answers3

0
var element = document.getElementById("yourElement")

This returns the DOM element you want (in this case, an image). Using the object's width and height properties, you get the width and height of the image (obviously).

You need to check if .width is greater than .height, then set the transfrom property of the element

Bálint
  • 4,009
  • 2
  • 16
  • 27
0

As you load image from a remote address, wait for image to load and then get width and height:

$('#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">

if You are using ionic you may access the element by ID using following code:

var $myimage=angular.element(document.getElementById("myimage"));
$myimage.on('load',function(){//Same  as above}
Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82
0

You will have to use JavaScript to add a class say 'wide image' with the following code:

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

And then use media queries to transform those images as required. Or you could add this class only when Windows width is at a certain breakpoint as an alternative option.

Also if possible if all of your images can be given a class you could get them by the class selector.

If in ionic modal you have the height and width information available, and can conditionally add the 'wide-image' class then that should work too.

Arathi Sreekumar
  • 2,544
  • 1
  • 17
  • 28