为什么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度。然后再试一次。