A visitor asked me how he could turn a picture so that it is displayed vertically when someone viewed his web page on a mobile phone. That is, he wanted the picture to be shown in its usual orientation, with the longer side horizontal, on a desktop or laptop computer, but rotated on a phone, so its longer side is now vertical.
This article deals with a picture that has to be displayed differently on computer monitors and mobile phones. If you simply want to rotate a picture permanently so that it is always in that position regardless of how it is viewed, you should just use an image editor to do it. It's much simpler and more efficient, and it avoids the problems that arise when you get CSS to do the rotation for you.
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 read How to Make Your Images Mobile-Friendly (Responsive Design) instead. I also have an article that shows you how to hide images on a website when it is viewed on a mobile phone.
My visitor had a website that used the 2 column layout generated by the Mobile-Friendly Layout Wizard, but you can also use the techniques described below on a website designed using any layout, self-created or obtained from elsewhere. That is, the method is a general one that can be used regardless of how you designed the site.
Obviously, this article presupposes that you already have a website. If not, please begin with the guide on How to Create a Website. You can always return to this article to fine-tune things after you get the basic design done.
Let's say you have an image with an id of "demo_picture". To rotate it, use the following CSS.
If this rotates your picture in the wrong direction, use rotate(90deg) instead. As you
may have guessed, you can use any angle you like. My use of 270 and 90 degress is because
the topic at hand is to turn it so that its length is now the height and vice versa.
However, if you simply use the above code, you will quickly notice a problem. The picture rotates around a point in its centre ("center" if you use a different variant of English). This means that the rotated image will overlap the content above and below it.
At this point, you will probably think, "Hmm. That's easy to solve. I'll just put the picture in its own DIV block with a fixed height that gives enough room for the rotated picture."
So, for a picture has a width of (say) 202 pixels and a height of 42 pixels, the HTML will look something like this:
And the CSS to give the DIV block the necessary height is:
Unfortunately, if you use the code as-is, you will find that while the container has the requisite height, the rotated picture will still overlap the paragraph above it while leaving a big gap below, since it pivots on its centre, while remaining essentially where it was.
The trick is to adjust its original position before rotating it, so that the final output is in
the correct place. To make sure that the rotated result does not cover any text above, but lies squarely
in the DIV block allocated for it, we need to move it a distance equal to (width - height)/2
downwards (where "/" represents the divide sign). You can easily perform this calculation manually and put
the results into the CSS, or, if want to leave a record of how you obtained the final number,
let the browser do the computation for you, with "calc((202px - 42px)/2)". You will, of course,
have to change the numbers to ones appropriate for your image. I will use the calc() function
in this tutorial so that it's clearer how I arrived at the result.
Changing the top position can be done in any number of ways, for example, with a margin-top rule,
or if you prefer to continue to use the tranform functions, with translateY().
The following example uses margin-top:
The code below uses a transform function:
If you choose to use translateY(), make sure the translation is done before the
rotation, since the order of operations is significant.
The demo picture above had its top position adjusted with margin-top and rotated, using the
exact code described earlier. But as I said, you can use any CSS positioning method you want.
At this point, you will probably think that to perform the rotation only when the picture is viewed on a small
screen device like a mobile phone, all you need to do is to place the rules in the @media
section for that device.
That's true. To a point. If you do it without taking any further action, you will probably encounter yet another problem. Mobile-friendly style sheets typically have rules like the following:
This rule resizes big pictures so that they fit on small screens. This is the correct approach to take,
except when you don't actually want the image to be resized but rotated. With the above blanket rule,
the image is resized by the browser before being rotated, which is not what you want here. It will also
throw off your margin-top (or translateY or whatever) calculations, since the
image will no longer have its original dimensions.
To fix that, add "max-width: none;" to the "#demo_picture" rules.
With this in mind, we can add all the rules we have accumulated so far to the style sheet.
Let's say that you have created your page based on a template generated by the
Layout Wizard,
and you chose 629 pixels as the point where it switches to its one-column mode for mobile phones.
In such a case, insert the rules just after the "@media" line in the
"styles.css" file.
If you did not use the Layout Wizard, and are also not sure how to create your own @media section
for small screen devices, please read
How to
Make a Mobile-Friendly Website: Responsive Design in CSS first. Do not blindly copy the above code.
Note that you will need to test the page on a phone (or a desktop browser window resized to mimic one).
Depending on the width and height of your image, you may find the results to be less than
pleasing. For example, if the picture is big, you may find the final output to be partially
clipped on the right side of the mobile phone. If so, set a "margin-left" on
your image with an appropriate number to move it to the left. (Tip: use negative numbers in
margin-left to move the image leftwards beyond its original boundaries.)
The transform functions are available in all modern browsers. If your visitors use Internet Explorer (which is now obsolete), they will need at least version 9.
Copyright © 2020 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Rotate an Image on a Website When Viewed on a Mobile Phone (CSS)
