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

calculate width of rotated rectangle
css rotate width problem
css rotate image
css rotate background image
rotate css position
css rotate clockwise
css rotate 90
css rotate screen

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>

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

Note: Calculating the Size of a Rotated Image, As described in the IIIF Image API, Section 4.3. Rotation, in order to retain the size of the requested image contents rotation will change the width and height  In Snagit Editor, select Image > Rotate > select a rotate option: Clockwise: Rotate image 90 degrees clockwise. Counter Clockwise: Rotate image 90 degrees counter clockwise. 180 Degrees: Rotate image 180 degrees. Custom Angle: Enter a custom angle in degrees.


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

Rotating images, container width remains the same, When you rotate an element with transform: rotate();, the container element is not resized accordingly with the new content. How can you make the container  Rotating Images with CSS. Have you ever found an image but wanted to display it flipped the other way? Previously you would have used your favourite image editor to create a new image that was flipped. These days it is now possible to rotate an image with CSS using the transform property.


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

Rotate image if width is greater than a value (i.e in pixels), You can analyse the size of the picture using ImageMagick's identify and then rotate it using ImageMagick's convert commandline tool. pic=file.jpg  Free photo resizer and image compressor to crop, resize images in JPEG|PNG|GIF format to the exact pixels or proportion you specified, compress them to reduce the file sizes, making it easy to use them as your desktop wallpaper, Facebook cover photo, Twitter profile photo, avatar icons, etc.


Rotating an image if the height is larger than width?, Here's one method you can try, although you don't specify exactly how you would like the image to be rotated - you can edit the 90 Degree angle to your own  I am using PIL to rotate an image. This works in general, except when I rotate the image exactly 90° or 270°, in which case the x and y measurements swap. That is, given this image: >>> img.size (93, 64) If I rotate it by 89° I get this: >>> img.rotate(89).size (93, 64) And by 91° I get this: >>> img.rotate(91).size (93, 64)


How to Rotate an Image on a Website When Viewed on a Mobile , An alternative to rotating a picture is to shrink it to fit the width of a mobile phone screen. Most websites do it that way. If you prefer that, please  When you insert an image into your latex document you can rotate, and resize it it at the same time. It is useful, especially if you are importing a full page postscript graph that has a landscape layout: In the example above I’m rotating the image by 270 degree, and set the image width to be half the width of the text on the page. [tags]latex, includegraphics, rotating images, rotating, images, tex, postscript [/tags]


Configure Rotating Images : TechWeb : Boston University, Before uploading the images for the rotating banner, resize them to the desired dimensions in an image editor (such as Photoshop) outside of WordPress. Rotated block is inside 40px vertical column. This means that width of the rotated block in auto mode is not more than 40px. So chunk of text is not placed on one continues line, instead line breaks appear. To better visualise this problem please check this fiddle I created: http://jsfiddle.net/F7CEX/.