以角度/ 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"}
];
}
}
有没有什么办法阻止这种自动旋转?
答
JPEG图像文件包含描述照片原始方向的元数据。这是Windows用来旋转图像的内容,但浏览器还不支持这一点。
请参阅这个答案对于一些替代方案: