角度/ cssで画像の自動回転を停止する

Question

これは角度のみで発生するのか、または自動回転を行う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"} 
     ]; 
    } 

} 

この自動回転を停止する方法はありますか？

Answer 1

JPEG画像ファイルには、写真の元の向きを説明するメタデータが含まれています。これはWindowsが画像を回転させるために使用しているものですが、ブラウザはこれをまだサポートしていません。

いくつかの選択肢のために、この答えをご覧ください。

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