1

On Page: https://legionhdk.pl/profil-krwiodawcy/donacje/donacja/3406-robert-kowalewski-08-09-2018 there is div with an image: https://legionhdk.pl/images/leg/donacje/752-IMG-3273.JPG in background:

.foto {
  width:200px;
  height:200px;
  background-size:contain;
}
<div class="foto" style="background-image:url('https://legionhdk.pl/images/leg/donacje/752-IMG-3273.JPG')"></div>

When I open image in any browser it looks ok but when it is in background then it's roated. Question is Why? Some photos in this place are ok but some of them are rotated.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Barto
  • 469
  • 1
  • 6
  • 15
  • Nothing problem in code. Its just the image... open the image in photoshop and save it twice. I know its sounds weird but its fact .. :) – codesayan Nov 05 '18 at 13:18
  • 1
    looks like that's the way you saved the image - if you use it in an image tag, it comes out that way too: http://jsfiddle.net/o0kujbLh/ - did you rotate using preview or windows image viewer as I know that sometimes just rotates the thumbnail but not the actual image – Pete Nov 05 '18 at 13:19
  • 1
    The image *is* rotated, but the browser is rotating/correcting it for you. When you use as a backgroundimage, it doesn't do the rotating. Check Exif: `Orientation - Right top` – freedomn-m Nov 05 '18 at 13:20

1 Answers1

5

They key here is in the image’s metadata:

When you rotate a photo using the iOS Photos app, it doesn’t actually rotate the image itself. Instead, it sets a flag in the metadata to say “this image has been rotated”. While some browsers are now smart enough to read this, apparently some don’t handle it correctly when the image is loaded via CSS.

The fix:

Use your favourite desktop photo editing software (Photoshop, GIMP, etc.) to open the image file and set the rotation correctly.

MTCoster
  • 5,868
  • 3
  • 28
  • 49
  • 1
    Also faced similar "bug" some time ago. https://github.com/keybase/keybase-issues/issues/43 – Anarion Nov 05 '18 at 13:41
  • Thank You. I thought it is something like this. Question is how to avoid this? These are users photos so I cannot modify them. Photo is properly displayed with img tag and wrong when is in background. Is there a way to force browser to obey exif meta data for image in background? – Barto Nov 05 '18 at 14:04
  • This is typically a problem that’s solved by the backend at the point of upload. However, there are some suggestions on [this question](https://stackoverflow.com/q/20600800/1813169) you may wish to consider. – MTCoster Nov 05 '18 at 14:07
  • @Barto check this one : https://gist.github.com/runeb/c11f864cd7ead969a5f0 – Temani Afif Nov 05 '18 at 14:08