I have a jpg image that was taken vertically and saved that way. It appears as it should (vertically-oriented) in Windows Explorer:
I've got this HTML/Spacebars to display it in my Meteor app:
<template name="nfnoscarsdonut">
<p>Here's a picture of NFN Oscar's microscopic Donut, which we had to eat because he pulled a "George 'No Show' Jones" again</p>
<img src="/images/NFNOscarsDonut.jpg" height="400" width="600"/>
</template>
...but it displays in "landscape" (rotated 90 degrees to the left), as you can see here:
What do I need to do to get the image to straighten up and display right (vertically)?
There seems to be no orientation property for the img tag
I'm not familiar with Meteor and this is just a guess. Maybe the JPEG file has its EXIF rotation property set which Windows Explorer is reading and using to "soft-rotate" the image for display and which the browser when referencing the image is simply ignoring (or vice-versa).
The simplest option might be to rotate the image using CSS as described here.
If you open the image in an image editor you can see if the image is rotated or not and if not then rotate it and see if that has any effect on its display on the web page.
Or you could view the EXIF properties of the file with an application such as one mentioned here.
A last resort could be to try to rotate the image according to its EXIF property with JS as described here, though that still assumes it has something to do with EXIF.
Whatever it is I think it has something to do with the file and/or its metadata rather than the HTML used to reference it, but since I don't know what other HTML or CSS may be being applied to the tag I may be wrong about that.
Hope that helps!
The link pjrebsch gave pretty much worked. For whatever reason, I also had to add a margin-top value. The code is now:
HTML (added rotate class):
<img class="rotate" src="/images/NFNOscarsDonut.jpg" height="400" width="600"/>
CSS:
.rotate {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
margin-top: 88px;
}
Related
I have an image on my website, this is its source:
<p>
<img src="images/image.jpg" style="width: 50%;" />
</p>
In Chrome and Firefox, the image displays correctly (same way as it is uploaded on server). However, in Edge, the image is rotated 90 degrees. When i download the image, it is always rotated correctly, even if I download it from Edge.
I have never encountered this issue before. Any solutions?
That's an incredibly odd behavior. Though this is not a good practice at all, in case of urgency I would address Edge specifically while looking for a permanent solution.
As per an answer here by #paulo-roberto-rosa, Edge is the only one that supports the selector -ms-ime-align. Therefore, you can try rotating it back to its position using a support query:
#supports (-ms-ime-align: auto) {
.img {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
First time posting here, so treat me gently. :)
I have an SVG image on my site which has a transparent background -
<img class="img-responsive center-block" src="images/pritchservices.svg" alt="Pritch Services Logo" />
Works beautifully on my site. However, due to the transparency, when that image loads in google image search results, due to the transparency, looks terrible.
I have an alternative image (using for fb Open Graph crawler) which is here -
Pritch Services Full Logo
In my crazy mind, this is what I had as a plan:
Redo the SVG in Illustrator to include the background color (as per the fb OPen Graph image) - this would then mean the image result in Google would be as expected
Have some CSS within my site to set the background color of the SVG to transparent, so it displays nicely (as it currently does on the site)
I am assuming I can't just put the SVG markup inline, as although this would give me what I wanted on the page, it wouldn't load the image AT ALL on google image search results?
Is this the way to go, if so, any suggestions on how to implement please; or is there an alternative solution I haven't thought of? Or am I just being too picky?!
Thanks in advance everyone...
You can't include an SVG via <img> and style it with CSS in your parent document.
You can't style the contents of an <img>, even if it is an SVG
CSS doesn't apply across document boundaries
You have a few options.
Include the version with a background in your page. And then hide it and replace it with the transparent-background version via CSS.
<div class="logo">
<img src="logo-with-background.svg" ... />
</div>
.logo img {
display: none;
}
.logo {
background-image: url(logo-without-background.svg);
}
Include the background version using <object> then use the DOM to find the background element and hide it.
var object = document.getElementById("myObject");
var svgDoc = myObject.contentDocument;
svgDoc.getElementById("bg").setAttribute("display", "none");
Apply a clipping path to the backgrounded version as #Obink suggests. It would work, but it is not the easiest solution though. And it won't work on older browsers that don't support clip paths.
In the following script, the area tag defined as a clickable area inside the center of the image-map.
The alt tag specifies text for the area, and the zoom property controls the magnification level to 50% zoom out of the original image:
<style type="text/css">
#myimg {zoom:50%; -moz-transform:scale(50%); -webkit-transform:scale(50%);}
</style>
<img src="http://www.content.onemexico.net/rosa.jpg" id="myimg" width="640" height="640" usemap="#themap">
<map name="themap">
<area shape="rect" coords="240,240,400,400" alt="RosesByAlt" title="RosesByTitle" href="#">
</map>
The description text for the clickable area is showing up in all major browsers except Internet Explorer (IE-9).
I tried the title attributes instead the alt, but still the text doesn't appear.
Please anybody can help make the description text to appear for clickable area with the zoom property using Internet Explorer.
IE9 works with the standard CSS transform property. It needs a prefix, but it does support it. So if you're just trying to support IE9, you don't need the zoom at all. You should be able to do this:
#myimg {
-ms-transform:scale(0.5);
-o-transform:scale(0.5);
-moz-transform:scale(0.5);
-webkit-transform:scale(0.5);
transform:scale(0.5);
}
If you need to support IE8 or earlier, then you'll need the zoom or something similar, but beware that zoom is not the same as scale; it may have some similarities on the surface, but it works quite differently, and you will get some weird effects if you use it.
So I would recommend not using zoom at all, even for old IE versions. You'll be better off using either IE's matrix filter or a polyfill script to backport support for the transform style into old IEs. The answers provided here may help you
Also note that I've added the un-prefixed version of the property as well: you should always provide the un-prefixed version of all properties, even if no browser supports it yet, because at some time in the future they will all drop support for their prefixed version, at which point your code will break if you haven't got the standard version in there.
If I include the css style 'writing-mode: tb-rl', which is used for writing vertical text, in the html stream that is to be converted to pdf, I get a repeat of the first 30 pages, up to the number of pages that should have rendered, which is always counted correctly.
SO for example in a 70 page pdf, it will show 70 pages but will repeat the first 30, between 30 and 59, and then show the first 10 again for 60 onwards.
If I remove the vertical text, i.e the style writing-mode: tb-rl, everything returns to normal. The vertical text when displayed is rendered correctly on page 21.
This happens in our code that uses the pdf library, and also in the example provided by Winnovative.
Has anyone dealt with this before? I would love a fix or work around as Winnovative are slow to respond to anything. Thanks
I never did find a direct work around to this issue.
Winnovative HTML2PDF is inconsistent in all version (tried up to 7) when the output includes vertical text in a multi-page document.
I would guess that this is something to do with page flowing/measuring calculations.
One alternative which we tested to work (but we did not use for other reasons) was to switch to evo pdf - a Winnovative sister product and their recommended solution to several internet explorer based issues apparent in the Winnovative HTML2PDF solution.
Our solution in the end was to use the existing Winnovative library to convert the pages with vertical text into non paged images (full height), and then embed the image in the PDF.
Winnovative HTML to PDF converter rendering is compatible with WebKit rendering. The supported way to rotate text is using CSS -webkit-transform property. For example, you can rotate a whole div 5 degrees clockwise using the following code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
/* Rotate div */
-webkit-transform: rotate(5deg);
}
</style>
</head>
<body>
<div>Hello</div>
</body>
</html>
I'm trying to implement a gauge widget for a website. The spec says only HTML/CSS is allowed, so I can't use JavaScript (don't ask me why -- maybe if there's a really simple way of doing it with JavaScript I could persuade the project lead).
So far I have a div with a background image that shows the back of the gauge. Inside this div is an img that is rotated, depending on the gauge value. This value is dynamically injected into the HTML using PHP.
The gauge works fine in Safari/FireFox, but breaks in IE. If I add a border to the image I can see why -- it appears that the IE rotation also includes an automatic translation so that the needle is off-center (see screenshot below).
So, here's the question: how do I shift the needle back to the center of the gauge in IE?
<div style="background: url('genies/gauge.png'); background-repeat: no-repeat; height: 235px; overflow: hidden;">
<img src="genies/gauge-needle.png"
style="-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678118655, M12=-0.70710678118655,M21=0.70710678118655, M22=0.70710678118655, sizingMethod='auto expand'); zoom: 1;" />
</div>
The problem here is that the image is rotating about a point that you don't expect it to.
You need to set the transform origin to the centre of your image.
For instance, you would use -moz-transform-origin, -webkit-transform-origin, -o-transform-origin, -ms-transform-origin, -etc-transform-origin...
Check out this page for information on how to deal with the Matrix filter in MSIE:
https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie
This is going to be difficult to solve without javascript, if your gauge only moves by a couple of increments (say, 15, 30, 45... deg), you could use this tool:
http://www.useragentman.com/IETransformsTranslator/
and manually pass the margin-left and margin-top values to IE.
Otherwise I'd recommend javascript with CSSSandPaper by the same author. http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/.
I found a solution without JS, for IE - see here