停止 angular/css 中图像的自动旋转答案

【问题标题】：Stop auto-rotation of images in angular/css停止 angular/css 中图像的自动旋转
【发布时间】：2017-10-06 22:31:40
【问题描述】：

我不知道这是否仅由角度引起还是有 css 自动旋转？

在 Windows 资源管理器中查看以下图片：

所有这些图像都是正确的。

现在当我在浏览器中显示它们时：

您可以清楚地看到问题所在。所有最初处于纵向模式的图像都会自动旋转。为什么会发生这种情况以及可能的解决方案是什么？

这是我的代码：

gallery.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-gallery',
  templateUrl: './gallery.component.html',
  styleUrls: ['./gallery.component.css']
})
export class GalleryComponent {
    @Input() datasource;
    selectedImage;

    setSelectedImage(image) {
        this.selectedImage = image;
    }
}

gallery.component.html:

<div class="modal fade" id="selectedImageModal" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <img *ngIf="selectedImage" src="{{selectedImage.url}}" >
            </div>
        </div>
    </div>
</div>
<ul id="thumbnailsList">
    <li *ngFor="let image of datasource" >
        <img src="{{image.url}}" class="tn"
             width="191" height="146"  
             data-toggle="modal" data-target="#selectedImageModal"
             (click)=setSelectedImage(image) />
    </li>
</ul>

gallery.component.css：

ul 
{ 
    padding:0; 
    width:780px; 
    margin:20px auto
}

li 
{ 
    display:inline;
}

.tn
{ 
    margin:2px 0px;
    box-shadow:#999 1px 1px 3px 1px; 
    cursor: pointer 
}

.modal-content 
{
    width: 670px !important;
}

那我使用这个图库组件如下：

<div class="col-md-8 col-md-offset-1">
    <app-gallery [datasource]="images"></app-gallery>
</div>

打字稿：

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

    images;

   constructor(){
      this.images = [
            {"url":"assets/Images/1.jpg"},
            {"url":"assets/Images/2.jpg"},
            {"url":"assets/Images/3.jpg"},
            {"url":"assets/Images/4.jpg"},
            {"url":"assets/Images/5.jpg"},
            {"url":"assets/Images/6.jpg"},
            {"url":"assets/Images/7.jpg"},
            {"url":"assets/Images/8.jpg"},
            {"url":"assets/Images/9.jpg"},
            {"url":"assets/Images/10.jpg"},
            {"url":"assets/Images/11.jpg"},
            {"url":"assets/Images/12.jpg"},
            {"url":"assets/Images/13.jpg"},
            {"url":"assets/Images/14.jpg"},
            {"url":"assets/Images/15.jpg"},
            {"url":"assets/Images/16.jpg"}
      ];
   }

}

有没有办法阻止这种自动旋转？

【问题讨论】：

标签： javascript css angular typescript

【解决方案1】：

JPEG 图像文件包含描述照片原始方向的元数据。这是 Windows 用来旋转图像的方法，但浏览器尚不支持。

请参阅此答案以获取一些替代方案：

https://stackoverflow.com/a/18643802/5074540

【讨论】：