Rotating an image and reading full text

I have a page at http://dot.kr/QnA/241029imageRotate/

The code below is for displaying the 1st image.

1st image<br>
<img src="myImage.jpg" style="width:300px"><br>

The code above displays well as it is.
However I face a problem in the 1st image.
Since the original image is rotated by 90degree, It is difficult to read the text.

So I made the code below.

2nd image<br>
<img src="myImage.jpg" style="transform:rotate(-90deg);width:300px"><br>

Now I can read it more easily with the 2nd image.
However I met another problem.
There are some numbers β€œ20241002” at top right.
It means 02, October, 2024.
As I rotate the image to left by 90degree. β€œ202410” is desappeared.
So I can’t read the year and month.

the cod below is one of my trials for reading easily and full text.

3rd image<br>
<img src="myImage.jpg" style="transform:rotate(-90deg); width:300px;height:auto;"><br>

I failed in reading the full text.

How can I reading the full text of the image?

Personally, I would rotate the image in an image editor. But anyhow, by default an element rotates from the center, but you can change that with transform-origin:

<img style="transform-origin: 0% 0%; transform:rotate(-90deg); width:300px;" src="myImage.jpg">
1 Like

Thank you. it works.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.