As you see on my codepen sample, image is rotated by browser automatically. On the other hand if you look to original image it's not rotated.
I'm using Chrome 80. I know it can be fixed on Firefox with image-orientation style, but how can I fix it on the chrome. I don't want the browser to rotate the image
The rotation is baked into the EXIF data of your image. This is going to be more and more common as browsers honour this EXIF setting.
As per your comment, by converting it to a PNG, you probably ended up stripping that data out of the image file, fixing the issue you were experiencing.
Related
I am displaying lots of similar images in img tags. But browswer is automatically autorotating image in landscape mode. How can we prevent this?
Below is one of sample image.
https://fuloop.com/backend/web/upload/post_image/1493385167_1493252982_JPEG_20170426_171917.jpg
Thanks
Shyam
I think you can use css image-orientation in FF and Safari.
However if you want to fix the orientation in Chrome, I would suggest to use css transform to rotate your image...
Additionally, if you're a vue.js developer, you can simply use this vue-img-orientation-changer to fix the incorrect img orientation.
vue-img-orientation-changer is a vue directive plugin.
Check the example:
Fix Img Orientation
Github Repository: vue-img-orientation-changer
This is because there is EXIF data saved from whatever camera was used to take the image. You can get an image editor or tool that edits the EXIF data to set it to the orientation that you want.
Your linked image shows up for me in portrait mode in Chrome, but in IE it showed up rotated in landscape mode. Firefox, seemed to load the dimensions in landscape mode first but then rotated it into portrait mode. It ended up looking a bit glitchy.
Some image editors such as GIMP will ask if you want to rotate the image upon opening it as it detects the orientation in EXIF is different from the actual orientation. If you indicate that you want GIMP to rotate it, then save it, it should be in the correct orientation.
I have no clue what happened, I created an svg image in illustrator, saved it, posted it to my wordpress site, and everything was good to go.
((Its upposed to show under the text box on this page.
I resized the screen, the image disappeared, and now no matter what i do, it will not show.
Furthermore, The problem appears to be limited to Chrome, Ive tried creating multiple other svg images, and none of them will show at all on chrome whereas all of them work on other web browsers.
I've also added code to my htaccess, still no luck. i knew that wouldn't work because ive posted svg's to my wordpress site before with no problem...
my illustrator settings are as follows:
svg profiles: svg 1.1
fonts type: convert to outline
image location: embed
advanced options - css properties: Presentation Attributes
Decimal places: 5, unicode 8
-responsive box checked
///////
Here's a google docs link to the svg code
SVG CODE - Google Docs
EDIT** Now the images aren't showing up in any browsers, i haven't changed anything.
If you examine the <img> element in your browser dev tools you'll see the problem. The browser is sizing the <img> for the SVG at (0 x 0).
Here's the relevant HTML from your page:
<img src="https://makerstrunk.com/wp-content/uploads/2015/04/coursetrunksample1.svg"
class="mpc-transition attachment-full" alt="coursetrunksample1">
You haven't sepcified a width and height here. But you have for the PNG versions of the image you have included on the page. Normally, in HTML, images default to the natural/intrinsic size of the bitmap. But SVGs don't always have those values. And yours doesn't. Check the contents of the SVG. You'll see it has no width or height.
If you add width and height to your <img> tag, all will be well.
<img src="https://makerstrunk.com/wp-content/uploads/2015/04/coursetrunksample1.svg"
class="mpc-transition attachment-full" alt="coursetrunksample1"
width="300" height="250">
If you look at this page, you will see that the right two images are sideways:
http://www.disneypinplace.com/beta/pin.php?id=PD78685
But when you click on them, they appear correctly in full screen view, vertically. I can't see anything wrong in my HTML img code that could cause this.
Can anyone tell me why this is happening? These photos were taken with an iPhone 5 by the way.
This is a particular problem with how the iPhone exports images. Seem this link for a similar situation.
Computers/browsers and iPhone software interpret the camera metadata (details about image, including portrait/landscape) differently thus causing the difference in rendering.
I was able to download the far right image in Pixelmator/Photoshop and save it as a jpg again, making sure it was portrait. This made it so the browser properly rendered the image and did not rotate it 90 degrees.
Were these pictures taken sideways, by any chance? Have you tried editing and "exporting for web" from Photoshop, for example?
Maybe the problem is on the image EXIF (as in you only see the image correctly because the browser reads the EXIF info and rotate it on screen). Exporting it will most likely remove that info from the image file and it might make it correct.
I spent an hour with this that I'll never get back. :)
The Problem
I took the picture on my Samsung GALAXY Tab PRO 8.4. It rendered SIDEWAYS in an Android Emulator as well as in FireFox 42.0.
The Fix
I edited the picture in IrfanView.
I went to Properties_Settings -> JPG_PCD_GIF ->
UNCHECK "Auto-rotate Image according to EXIF info (if available)"
It now renders OK in FireFox. I haven't checked the emulator yet.
On my site - http://appliedcodingtech.com/site/factory_automation_photos, an image towards the bottom does not show up in IE8, but it shows up just fine in FF and Chrome. What is wrong?
The broken image is a CMYK .jpg, which IE8 does not support.
It looks like it's an issue with the image (corrupt or whatnot). Just opening the image in a new tab doesn't even work. My advice is take a screen cap of it and save that as Twin_belt_transport.jpg and re-upload it.
I think it is a corrupt image - I used Paint.Net to open the image and re-saved it, and now IE will display it.
Apparently the image is corrupted (applications may handle this in different ways) or is stored in a way that is not supported by IE. Try saving the image again using an image editor.
The problem lies in the image itself. IE cannot open it from disk either. It is indeed a jpg image (it has the 'exif' header), although I don't have the tools at hand to study exactly what's wrong with it.
Good question.
It seems that the image file is corrupted. Re-uploading it would definitely fix it!
But also some pointers
Thumbnails are too big. Use different images for thumbnails and for
view purposes. It loads slow and doesn't look professional at all :(
Your using .jpg and .JPG file extensions. For a more beautiful code,
use only lowercase .jpg!
There are spaces in the filenames. Use _ or -
I've built a website for someone, but according to him, scrolling is very very choppy on the website in IE7 on his computer. On my computer I don't have any problems with scrolling (in any browser), i've already tried some things, but according to him scrolling still is very choppy. So I was wondering if someone has some suggestions for me? I think the main problem is the full width background image, but i'm not entirely sure.
The website is:
www.casalagodilugano.nl
The website is in dutch, but for this question that doesn't have to matter
edit:
Tx for the helpful answers. In the end, it was indeed the background image which caused problems in IE7. By accident I found a way to work around this problem: I set the image as the background image, centered the image, and using css3 I made sure the was stretched the way it should.
I had a problem similar to this. It turned out to be because my computer was full and my performance suffered. Viewing the issue on my new machine (also had IE7) produced no choppy scrolling. I fear your client has the same problem, perhaps suggest it's his computer and not your website?
Edit:
Many things affect the processing on a website, I'd suggest it has to do with your background image. The sand has quite a "repeatable" texture so perhaps you should Photoshop it down so it's a much smaller image and just use 'background-repeat' in your CSS to achieve a similar effect. Your background image is also around 200% of what it displays on the website, I copied the URL of the image and viewed it by itself and it's HUGE! The emphasis here is on image file size, because IE is having trouble shifting the image down when you scroll. It's not a very good browser to be fair. I've also noticed that your large header image is larger in actual size, suggesting that the size is reduced by your code. Try reducing this image size to the size you want to display it
Edit pt 2
I've stumbled upon a script that for some reason waits 5 seconds before running and that is the Google maps API. I respect that you need this for the Routes page but if I were you, on any page where there is no map, remove any mention of the google maps api from the source code.
I have found that IE gets choppy when you have an <input> tag without a border or background specified ... very strange IE "bug" but i've fixed choppy scrolling on sites/pages by just adding a border to the <input> tags.