Image rotating in some devices automatically

Question

I am working on a website. It has a page to show in which I show several Images . I have come across a problem that the pictures that I have taken with my dslr at vertical angle () are rotating automatically when opened in my mobile phone. This is my html:

<div class="product-img container" style="width: 95% !important; margin-bottom:10px;">
<img src="{{product.disimage.url}}" alt=""> </div>

and this is the css that is linked to class product-img:

.latest-product-area .single-product .product-img {
  margin-bottom: 30px;
  position: relative;
}

.latest-product-area .single-product .product-img img {
  width: 100%;
}

.latest-product-area .single-product .product-img .new-product {
  position: absolute;
  top: 25px;
  left: 23px;
}

.latest-product-area .single-product .product-img .new-product span {
  background: #ff003c;
  padding: 3px 16px;
  border-radius: 30px;
  color: #fff;
}
.single-product .product-img {
  position: relative;
  overflow: hidden;
}
.single-product .product-img .p_icon {
  width: 90%;
  padding: 7px 30px;
  position: absolute;
  bottom: -100px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  background: rgba(37, 119, 253, 0.4);
  transition: all 400ms ease;
}

.single-product .product-img .p_icon a {
  display: inline-block;
  height: 36px;
  line-height: 40px;
  width: 36px;
  text-align: center;
  background: #fff;
  border-radius: 30px;
  color: #415094;
  margin-right: 25px;
}
.single-product .product-img .p_icon a:last-child {
  margin-right: 0px;
}

.single-product .product-img .p_icon a:hover {
  color: #fff;
  background: #2577fd;
}
.single-product:hover .product-img .p_icon {
  bottom: 0px;
}
.new_product .product-img {
  padding: 90px 0px;
}

When I open it on desktop there is no problem. But when I tested in several devices in two devices the vertical images auto rotated while in one it was normal. I have attached two pics to show the problem. Please help me fix it.Also I am working this on a django website so the images are being uploaded in the admin(database) then shown here.

The image above was taken horizontally (landscape) and is showed correctly. While the Image below(names UTt) WAS TAKEN vertically (potrait) but it is autorotating which I dont want it to be.

You need to read the meta data of the image (EXIF data) maybe this question can help you: https://stackoverflow.com/questions/20600800/js-client-side-exif-orientation-rotate-and-mirror-jpeg-images or this one: https://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side/20600869 — Baracuda078, Aug 17 '20 at 13:20

score 0 · Answer 1 · answered Aug 17 '20 at 13:27

0

Maybe this can help you? https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation

Browser seems to read the Metadata of your Image and choose appropriate orientation automagically. Using this CSS you should be able to force it the way you want, though I'm not so certain about Browser Cross-compatibility with this. You might have to check on that.

answered Aug 17 '20 at 13:27

maexware-dennis

11
1

Why is it happening with some devices only and not all? – VATSAL JAIN Aug 17 '20 at 13:32
Probably because the Browser only auto-rotates depending on if the Image doesn't fit the given Viewport size, though I don't know for certain. Haven't tested it out myself. Also my research tells me some Browsers handle Image-orientation differently than others, so could be something to do with that as well? – maexware-dennis Aug 17 '20 at 13:35

Image rotating in some devices automatically

1 Answers1