为什么 css 背景尺寸会旋转图像？

Question

我刚刚尝试了一些 css（下图）。但它会旋转图像。我有点困惑，从来没有见过这个。将鼠标悬停在文件夹中图像是直立的。你怎么阻止这个？我必须使用绝对位置而不是覆盖吗？

注意：使用 bootstrap 4.

左边的图片是尺寸为 3024x4032 的图片，在文件夹中是竖直的而不是水平的，如下图所示。

.room-thumb {
  min-height: 500px;
  width: 100%;
  display: table;
  background-size: cover;
  background-position: center center;
  margin: 20px 0;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<section class="rooms">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="row">
          <div class="col-12 col-sm-6 col-md-4">
            <div class="room-thumb" style="background-image: url('http://via.placeholder.com/3024x4032');">
              <div class="inner">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

有时图像会损坏。尝试使用 Photoshop 进行编辑并将其旋转 360 度。然后重试。

为什么 css 背景尺寸会旋转图像？

why does css background size rotate image?

html

css

background-image