5
Some photos that are loaded from the bank in my tag <img> appear lying (Landscape), but when I open the image of the PC it is correct in vertical position.
This is the part that receives the image.
HTML
<img
src="<?php echo $caminhoFotoEditaUsuario; ?>"
class="img-thumbnail imagem-grupo-cadastro"
id="fotoUsuario"
name="fotoUsuario"
>
CSS
.imagem-grupo-cadastro{
width :140px;
height : 140px;
float: left;
margin-top: 15px;
}
6
Usually the photo was taken "lying down", and the correct orientation marked on the tag orientation of EXIF.
The problem is that the photo is actually recorded "lying down" depending on the device (most commonly mobile phones and tablets), and is only "noted" in the said tag which is the correct orientation.
The consequence is what you realized in your application. In certain viewers, the image appears in the correct orientation, however, depending on the browser it will appear "lying down", because the EXIF tag is ignored in certain situations, and in others not.
The solution is to open the images in some graphical application, and correct the position. Preferably by eliminating the orientation of the EXIF, not to cause further ambiguities.
This is an image that has EXIF orientation. Click it to view outside the <img>, and test in more than one browser:
A good test is to save on the PC and check the thumbnails, and open in different software, to see how inconsistent the behavior of the tag.
In IE11, for example, always appears lying down.
In Opera 34 appears lying in the post, but in separate tab appears standing. Already in Opera12, appears lying in any situation.
In the Windows 7 viewer and thumbnails, lie down.
That same photo that was saved in Windows 7 and is appearing lying, while opening with Photoshop CS6 appears standing.
That’s right. See on PC does not mean anything. I have already opened photos lying here that when opening on PC the program rotates it automatically.
@Davidfernandes I left a comment explaining this under the question in 2014, but as I saw that there is a lot of answer here, I thought I better put this explanation. This happened a lot with iPhone, for example. I know that iMagik also ran automatically, and that was a mess. I don’t know how you’re doing today, but after I run some tests, I’ll update the answer in more detail. I will have to link an example photo outside of Sopt I think, because if you upload through the site, it loses the characteristics in the conversion. The general rule is "if in doubt, take the photo in the normal orientation" :)
Yeah. I’ve seen it here several times. I don’t remember if it was in Photoshop or Irfanview, but the photo was lying down and when it opened, it appeared "standing up".. rs
But the point is, it’s impossible for an image to see anything other than what’s on the server... unless a script changes it halfway through.. :)
You have to see if the browser reads this.
@Davidfernandes put an example. In the current Opera, this image uses EXIF if you open in a separate tab, but does not use inside the IMG.
What image????
True. In Photoshop she appears lying down. Already in Irfanview appears standing, and also appears standing in the Windows Thumb.
But I think the crux of the matter is, who’s going to send the image should treat it before sending it, not send it like it was taken.
This is more or less what I mentioned in the fourth paragraph. In addition, to take unnecessary data from the image. I’ve heard stories of people who were complicated by posting pictures "anonymously" without realizing that they had GPS coordinates inside. It became an "anonymous" address. In one of these, you can even take a picture of a rare elephant, and be handing the poor animal over to hunters just by posting the photo on the Internet. The good thing is to clean up the EXIF and all the extra image data, even for bandwidth saving.
-2
As already suggested, probably the photo is actually lying down.
If it is a problem with all images, it is very likely that the script that is sending the images is sending them incorrectly.
One way to solve your problem would be to use css-Transform, with Rotate:
.imagem-grupo-cadastro {
transform: rotate(xdeg);
}
Where x is the number of degrees, which in your case would be 90 or -90, depending on which side your image was rotated to.
Also remember to use variants -ms-transform and -webkit-transform.
But I make it very clear that this would be another "gambiarra" to solve your problem, in case it is urgent. The ideal would be to know why your image was wrongly loaded.
If the problem is in the script that sends the photo, you have to fix the script, otherwise all the photos will be affected, including those that are loaded correctly.
-2
Try removing the height:
.imagem-grupo-cadastro{
width :140px;
float: left;
margin-top: 15px;
}
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
Probably the original photo is actually lying down, and the PC viewer is automatically rotating based on the image orientation flag, but the browser is not.
– Bacco
If that is the case, your Application has no limitation as to the version of the browsers that will view it and reprocess each image is a hindrance, the Transform property CSS3 can break a branch.
– Bruno Augusto
One way to solve without having to modify the image is to get Exif via Javascript and detect whether or not to rotate. A similar question in SO-en: http://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images
– Daniel Omine
in google, I searched for the words "jquery image Exif auto Rotate".
– Daniel Omine
Dear @Leandro, I know it’s been a long time and you’ve probably solved it, but I recommend this: https://answall.com/a/170492/3635, are two different solutions, because you won’t always have Exif.
– Guilherme Nascimento