图片在某些设备中自动旋转

Question

我正在一个网站上工作。它有一个页面显示，其中显示了几个图像。我遇到了一个问题，当用手机打开时，我用dslr以垂直角度（）拍摄的照片会自动旋转。 这是我的html：

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

这是链接到类product-img的css：

.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;
}

当我在桌面上打开它时，没有问题。但是，当我在两台设备中的几台设备中进行测试时，垂直图像会自动旋转，而在一台设备中这是正常的。我已附上两张照片以显示问题。请帮助我修复它。此外，我也在django网站上进行此操作，因此图像已在admin（数据库）中上传，然后显示在此处。

上面的图像是水平拍摄的（风景），并且显示正确。虽然下面的图片（名称为UTt）是垂直拍摄的（potrait），但它是自动旋转的，我不希望这样。

Answer 1

也许这可以帮助您？ https://developer.mozilla.org/en-US/docs/Web/CSS/image-orientation

浏览器似乎正在读取图像的元数据，并自动选择合适的方向。使用此CSS，您应该可以按所需的方式进行强制，尽管我不太确定与此相关的浏览器交叉兼容性。您可能需要检查一下。