以角度/ css停止图像的自动旋转

我不知道这是仅在角度上引起还是存在css做自动旋转？以角度/ 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"} 
     ]; 
    } 

}

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

来源

2017-05-08 Vishal

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

请参阅这个答案对于一些替代方案：

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

来源

2017-05-08 20:54:13

以角度/ css停止图像的自动旋转

回答

相关问题