以角度/ 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停止圖像的自動旋轉

回答

相關問題