html - 图像在幻灯片上旋转

标签 html css twitter-bootstrap carousel

我正在使用 bootstrap carousel 插件来幻灯片放映照片。问题是一些图像被旋转了 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>

这是我上传的实际照片:

enter image description here

这是我在网站上得到的:

enter image description here

我已禁用手动高度和宽度,但不起作用。

最佳答案

在两个链接中回答这个问题的详细信息: http://www.impulseadventure.com/photo/exif-orientation.html https://www.ivertech.com/Articles/Image-Rotation-Issue-With-Windows-10.aspx

简短摘要 - JPG 中有一个方向标志,并非所有显示代理都支持。 Carousel 没有,但 Windows 10 有,因此图像在文件资源管理器中看起来正确,但在 Carousel 中旋转。链接中给出了两种解决方案,并解释了为什么Windows工具中的旋转功能不起作用。

关于html - 图像在幻灯片上旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38813028/

相关文章:

asp.net - 移动设备上的 Sharepoint 2010 下拉菜单

html - 使标题的图标在右侧 HTML/CSS 上对齐

javascript - 当我尝试使用 setTimeout() 为其设置动画时,div 不会变小吗?

jquery - Bootstrap 数据表样式

javascript - 使用 JavaScript 循环遍历表格中的所有 div

html - 我有一个带有文本的按钮,但文本未在按钮中居中。它不是在中间,而是在按钮的左上角

javascript - Bootstrap 4 轮播控件不工作

html - 如何覆盖 CSS 以更改 Bootstrap 的 <th>

javascript - 将 Canvas 放大到父级的宽度和高度

css - Div 延伸到页面下方太远