image gets rotated on slideshow

问题

I'm using bootstrap carousel plugin to slideshow the photos. The problem is some images gets rotated by 90 degree, Is there any way to solve the problem?

Here is the 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>

This is the actual photo i uploaded:

And this is what i get on the website:

I ve disabled the manual height and width, but does not work.

回答1:

Details answering this at two links: http://www.impulseadventure.com/photo/exif-orientation.html https://www.ivertech.com/Articles/Image-Rotation-Issue-With-Windows-10.aspx

Short summary - there is an orientation flag in JPG that is not honored by all display agents. Carousel is one that does not, but Windows 10 does, so the image looks right in File Explorer, but is rotated in Carousel. Two solutions given in the links, and explanation about why the rotate function in Windows tools doesn't work.

回答2:

Good day. This happened to me as well and what I did was to save the image as web with the same file format into a different file using Photoshop. Hope this helps. Thank you.

来源：https://stackoverflow.com/questions/38813028/image-gets-rotated-on-slideshow

标签

html

css

twitter-bootstrap

carousel