Some photos that are loaded from the database into my <img> tag appear landscape, but when I open the PC image it is upright.
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;
}
Normally, the photo was taken "lying down," and the correct orientation was tagged in the orientation tag of the EXIF .
The problem is that the photo is actually recorded "lying down" depending on the device (most commonly cell phones and tablets), and it is only "noted" in the Tag which is the correct orientation.
The consequence is what you noticed in your application. In some 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 some cases not.
The solution is to open the images in some graphical application, and correct the position. Preferably deleting the EXIF orientation to avoid further ambiguity.
This is an EXIF-oriented image. Click on it to view out of <img> , and test on 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 tag behavior is.
In IE11, for example, it always appears lying down.
In Opera 34 appears lying on the post, but in separate tab appears standing. Already in Opera12, it appears lying in any situation.
In the Windows 7 viewer and thumbnails, it appears lying down.
This same photo that was saved in Windows 7 and is appearing lying down, when opening with Photoshop CS6 appears.
Try removing the height:
.imagem-grupo-cadastro{
width :140px;
float: left;
margin-top: 15px;
}
As already suggested, the picture is probably lying down.
If this is a problem with all images, it is very likely that the script 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.
Also remember to use the variants -ms-transform and -webkit-transform .
But I make it clear that this would be more of a gambiarra to solve your problem, if it is urgent. Ideally, you should know why your image was loaded wrong.