Image rotating in some devices automatically - html

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.

Answer 1

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.