Rotating image if width < height with Javascript without modifying each image?

Question

I'm trying to get all image elements on a html page then check each image if the width < height (portrait) then rotate it.

The problem is my script doesn't work for each image but for all of them because i get the images by "img" tag, then i have no idea how to apply the rotation for individual images.

Is it possible to do this without having to modify the markup for each images (I want to avoid putting ids for every image)?

<script>
$(document).ready(function() {
    var imgs = document.getElementsByTagName("img");

    for (var i = 0; i < imgs.length; i++) {
        img = document.getElementsByTagName("img")[i];
        var width = img.clientWidth;
        var height = img.clientHeight;
        if(width<height){
            img.setAttribute('style','transform:rotate(90deg)'); //how do I apply this for each image?
        }
        else{
        }
    }
});
</script>

You _are_ setting the `style` only for a single image in the loop. Please post the full reproduction. — Lazar Ljubenović, Dec 04 '18 at 10:25
@theapologist the html has been done and there are a lot of images. It will take a long time assigning ids for all of them, unless that is the only possible option. — Rizki Hadiaturrasyid, Dec 04 '18 at 10:27

Nick Parsons · Accepted Answer · 2019-01-15T05:46:08.760

Your code seems to be working for images of the correct dimensions. However, you can change your code a little. For the code that you've given you don't need to do:

img = document.getElementsByTagName("img")[i];

in your for loop at each iteration, as this is an expensive function to run. Instead, you already have the result of document.getElementsByTagName("img"); stored in imgs, so you can use that instead:

img = imgs[i];

See working example below:

$(document).ready(function() {
  var imgs = document.getElementsByTagName("img");
  var imgSrcs = [];

  for (var i = 0; i < imgs.length; i++) {
    img = imgs[i];
    var width = img.clientWidth;
    var height = img.clientHeight;
    if (width < height) {
      img.setAttribute('style', 'transform:rotate(90deg)'); 
    }
  };
});

img {
  height: 150px;
  width: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Width &gt; Height</p>
<img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg" />

<p>Width &lt; Height</p>
<img src="https://d1qb2nb5cznatu.cloudfront.net/startups/i/32728-274244db60c65e1cc32abb4c54a2c582-medium_jpg.jpg?buster=1442602512" />

<p>Width &lt; Height</p>
<img src="https://images.unsplash.com/photo-1522092787785-60123fde65c4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94d6ebf03fdc6a3c8159ac9aeceb0483&w=1000&q=80" />

Also, since your using jQuery, this can be done even easier using jQuery methods:

$(document).ready(function() {
  $('img').each((_, elem) => {
    let width = $(elem).width();
    let height = $(elem).height();
    if(width < height) {
      $(elem).css({'transform': 'rotate(90deg)'});
    }
  });
});

img {
  height: 150px;
  width: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Width &gt; Height</p>
<img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_1904,c_limit/so-logo-s.jpg" />

<p>Width &lt; Height</p>
<img src="https://d1qb2nb5cznatu.cloudfront.net/startups/i/32728-274244db60c65e1cc32abb4c54a2c582-medium_jpg.jpg?buster=1442602512" />

<p>Width &lt; Height</p>
<img src="https://images.unsplash.com/photo-1522092787785-60123fde65c4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94d6ebf03fdc6a3c8159ac9aeceb0483&w=1000&q=80" />

score 2 · Answer 2 · answered Dec 04 '18 at 11:05

I tried the code provided and on many occasion (reload for instance) it doesn't get the width and height of the image.

It seems that instead of using

$(document).ready(fn)

you should use

$(window).on("load", fn)

There was a question on this topic Official way to ask jQuery wait for all images to load before executing something

score 0 · Answer 3 · edited Dec 04 '18 at 10:39

0

<script>
$(document).ready(function() {
    var imgs = document.getElementsByTagName("img");
    var imgSrcs = [];

    for (var i = 0; i < imgs.length; i++) {
        var img = document.getElementsByTagName("img");//add all images in array
        var width = img[i].clientWidth;
        var height = img[i].clientHeight;
        if(width<height){
            img[i].setAttribute('style','transform:rotate(90deg)'); //change style for current image
        }
        else{
        }
    }
});
</script>

edited Dec 04 '18 at 10:39

Theraot

31,890
5
57
86

answered Dec 04 '18 at 10:28

Saalim Mohammad

91
3

How is this different from the code in the question? – Lazar Ljubenović Dec 04 '18 at 10:34
Sorry it would be `img[i].clientWidth` and `img[i].clientHeight` – Saalim Mohammad Dec 04 '18 at 10:36
I can see that, but it doesn't change its _behavior_ at all. Also you already have the array of images in `imgs` from the third line, the first line in loop is compeltely pointless. – Lazar Ljubenović Dec 04 '18 at 10:37
@LazarLjubenović Yes, but the current code will also run. I didn't checked the complexity or bug in the code. The main point that I wanted to show is that we are looping to every image but changing the style of the single image. – Saalim Mohammad Dec 04 '18 at 10:40

Rotating image if width < height with Javascript without modifying each image?

3 Answers3