Stoppen Sie die automatische Rotation von Bildern in eckigen/css

Question

Ich weiß nicht, ob dies nur in Winkel verursacht wird oder gibt es Css Autorotation?

Schauen Sie sich die Bilder unten in Windows Explorer:

Alle diese Bilder richtig sind.

Wenn ich jetzt zeigt sie in Browser:

Sie das Problem offenbar zu sehen. Alle Bilder, die sich ursprünglich im Hochformat befinden, werden automatisch gedreht. Warum das passiert und was sind die möglichen Lösungen?

Hier ist mein Code:

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

Dann benutze ich diese Galerie Komponente wie folgt:

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

Typoskript:

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"} 
     ]; 
    } 

} 

Gibt es eine Möglichkeit, diese Auto-Rotation zu stoppen?

Answer 1

JPEG-Bilddateien enthalten Metadaten, die die ursprüngliche Ausrichtung der Fotos beschreiben. Dies ist, was Windows verwendet, um die Bilder zu drehen, aber die Browser unterstützen dies noch nicht.

Bitte lesen Sie diese Antwort für einige Alternativen:

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