1

I made a website for my aunts clothing shop, has a CMS where she can add new clothes to the collection on the website. While doing this, she needs to upload a photo of the clothing, add a title and brand etc. etc.

This process goes well, but recently images started appearing rotated on the website. The image upload is perfectly fine, and the images uploaded don't seem rotated while looking in the files or looking at the image source. So it seems some kind of CSS-property is messing with some of these images.

While trying to resolve the issue myself, I found out that when I crop a tiny bit of a picture before uploading it, it will appear as normal on the website. (Just making a copy of the picture, doesn't work).

In this image, you see that the top picture appears as normal, and the bottom picture is rotated -90 degrees.

The css-code used on these images is as following:

element.style {
     background-image: url(*path to image*);
}

.box {
     width: 100%;
     height: 333px;
     background-repeat: no-repeat;
     background-size: cover;
     border-radius: 7px;
}

When you click on the image, you will be taken to a page with more info about the product. The issue is the same here. The difference in CSS between the list of clothing and the info page is that the image on the info page is an img-element. In the list, it's the background of a div.

All of these items are loaded from a MySQL database using PHP.

I couldn't find anything on the internet on this issue. Can someone help me with this? Thanks in advance!

Edit: Stripping the image of EXIF data before uploading doesn't seem to work.

Tom Rassaerts
  • 47
  • 7
  • Possible duplicate of [Accessing JPEG EXIF rotation data in JavaScript on the client side](https://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side) –  Jan 18 '19 at 15:11
  • It sounds like an image sizing issue try changing your height and width to different values. I am not sure could you also post your html? – connorg98 Jan 18 '19 at 15:34

1 Answers1

1

Things like that happen if there is bogus EXIF data in the image. Some Browsers interpret these information and some don't. Best is to strip the image from all EXIF data either on your computer before uploading or before storing them on your server.

MaZoli
  • 1,388
  • 1
  • 11
  • 17