Hi all,
In my topic I have an image which is needed for PDF and HTML5 output.
Later I´d like to work with one svg format only, later ...
At the moment the original image for the PDF output is an illustrator eps in portrait
For the HTML5 output I save this file as JPG image.
But for the HTML5 output I need this file in landscape. How can I do / rotate this?
I guess, with capture it does not work because capture rotates only objects on top of the image.
I´d tried this idea with the rotate attribute, but does not work.
<p MadCap:conditions="Generate_Output_Conditions.ScreenOnly">
<img src="../../Images/4_Images_BLD/L6000_BLD.jpg" alt="L6000 Block diagram" rotate="90" />
</p>
Rotate an image
Re: Rotate an image
You want to use the CSS property transform with the value rotate(90deg) as described here:
https://www.w3schools.com/cssref/css3_pr_transform.asp
https://www.w3schools.com/cssref/css3_pr_transform.asp
-
- Senior Propellus Maximus
- Posts: 4293
- Joined: Thu Feb 02, 2006 9:29 am
- Location: The Electric City
Re: Rotate an image
I can also dig up some PHP code that rotates images on the fly based on settings stored in a database. I used that for a photo viewer web app years back where I had image files that needed to be rotated left 90°, right 90°, 180°, or not at all.
Honestly, use the CSS approach and craft various styles that do what my code does. When I coded this CSS and browsers couldn't do this. Using the style transform is likely much faster and much easier to implement in static pages such as HTML5 help.
Honestly, use the CSS approach and craft various styles that do what my code does. When I coded this CSS and browsers couldn't do this. Using the style transform is likely much faster and much easier to implement in static pages such as HTML5 help.
New Book: Creating user-friendly Online Help
Paperback http://www.amazon.com/dp/1449952038/ or https://www.createspace.com/3416509
eBook http://www.amazon.com/dp/B005XB9E3U
Paperback http://www.amazon.com/dp/1449952038/ or https://www.createspace.com/3416509
eBook http://www.amazon.com/dp/B005XB9E3U
Re: Rotate an image
nice that helps me a lot, thanks
-
- Jr. Propeller Head
- Posts: 3
- Joined: Wed Nov 14, 2018 4:33 am
Re: Rotate an image
Does rotating images work in PDF output? I have a separate img class in my css to but it doesn't seem to be doing anything.
Thanks in advance.
Thanks in advance.
Re: Rotate an image
Hi,
I´ve this div class below but I use it as a screen only conditions. So I guess at the moment I had problems
- rotating the image JPG file, works fine for HTML5 output
- rotating the EPS illustration for PDF output. Does not work.
I should check this as responsive svg image for both, but that svg issue needs a couple of time ....
div.ImageRotate90
{
transform: rotate(90deg);
}
I´ve this div class below but I use it as a screen only conditions. So I guess at the moment I had problems
- rotating the image JPG file, works fine for HTML5 output
- rotating the EPS illustration for PDF output. Does not work.
I should check this as responsive svg image for both, but that svg issue needs a couple of time ....
div.ImageRotate90
{
transform: rotate(90deg);
}