我正在使用引导轮播插件来幻灯片显示照片。问题是有些图像旋转了 90 度,
有什么办法可以解决这个问题吗?
这是 HTML:
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div id="firstCarousel" class="carousel" style="background-color:ghostwhite; border:solid white; box-shadow:0 0 30px">
<ol class="carousel-indicators">
<li data-target="#firstCarousel" data-slide-to="0" class="active"></li>
<li data-target="#firstCarousel" data-slide-to="1"></li>
<li data-target="#firstCarousel" data-slide-to="2"></li>
<li data-target="#firstCarousel" data-slide-to="3"></li>
<li data-target="#firstCarousel" data-slide-to="4"></li>
<li data-target="#firstCarousel" data-slide-to="5"></li>
<li data-target="#firstCarousel" data-slide-to="6"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/1873-min.JPG" class="img-responsive" style="height: 600px; width: 500px;" />
</div>
<div class="item">
<img src="img/1992.JPG" class="img-responsive" style="height: 600px; width: 500px;" />
</div>
<div class="item">
<img src="img/1993.jpg" class="img-responsive" style="height: 600px; width: 500px;" />
</div>
</div>
<a class="carousel-control left" href="#firstCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="#firstCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
</div>
这是我上传的实际照片:
这就是我在网站上得到的:
我已经禁用了手动高度和宽度,但不起作用。
详细回答这个问题的两个链接:http://www.impulseadventure.com/photo/exif-orientation.html http://www.impulseadventure.com/photo/exif-orientation.html
https://www.ivertech.com/Articles/Image-Rotation-Issue-With-Windows-10.aspx https://www.ivertech.com/Articles/Image-Rotation-Issue-With-Windows-10.aspx
简短摘要 - JPG 中有一个方向标志,并非所有显示代理都遵守该标志。 Carousel 不支持此功能,但 Windows 10 支持此功能,因此图像在文件资源管理器中看起来正确,但在 Carousel 中却旋转了。链接中给出了两个解决方案,并解释了为什么 Windows 工具中的旋转功能不起作用。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)