旋转并缩放图像以"适合"容器div

Question

我正在transform根据其EXIF数据旋转图像.然后,我想通过将它装到它的父div来显示它"全屏".

问题是,max-width/ max-height和所有其他大小调整指令"忽略"旋转(这是正常的,根据transform规范,元素的转换在流程中被"忽略".

Jsfiddle:http://jsfiddle.net/puddjm4y/2/

div.top {
    position: fixed;
    width: 100%;
    height: 100%;
    border: 1px solid blue;
}
img {
    transform: rotate(90deg);
    max-width: 100%;
    max-height: 100%;
}

<div class="top">
    <img src="http://www.androidpolice.com/wp-content/uploads/2014/02/nexusae0_wm_DSC02232.jpg">
</div>

有没有办法实现这个目标？

Answer 1

对于全屏显示，最简单的解决方案是使用视口单位指定图像的宽度和高度：

• 正常图像应为100vw宽，100vh高
• 旋转图像的宽度应为100vh，高度应为100vw

可以使用CSS转换将图像移到中间。这是一个示例，它使用两个大于和小于视口的图像：

body {
  margin: 0;
}
img {
  display: block;
}
img.normal {
  max-width: 100vw;
  max-height: 100vh;
  transform: translatex(calc(50vw - 50%)) translatey(calc(50vh - 50%));
}
img.rotated {
  max-width: 100vh;
  max-height: 100vw;
  transform: translatex(calc(50vw - 50%)) translatey(calc(50vh - 50%)) rotate(90deg);
}
/* demo */
.demo {
  height: 100vh;
  position: relative;
}
.demo:nth-child(odd) {
  background-color: #CCC;
}
.demo:nth-child(even) {
  background-color: #EEE;
}
.demo::after {
  content: attr(title);
  position: absolute;
  left: 0;
  top: 0;
  padding: .25em .5em;
  background-color: rgba(255, 255, 255, .8);
}

<div class="demo" title="Large image, normal"><img class="normal" src="https://i.stack.imgur.com/2DdPE.jpg"></div>
<div class="demo" title="Large image, rotated"><img class="rotated" src="https://i.stack.imgur.com/2DdPE.jpg"></div>
<div class="demo" title="Small image, normal"><img class="normal" src="https://i.stack.imgur.com/ustNQ.jpg"></div>
<div class="demo" title="Small image, rotated"><img class="rotated" src="https://i.stack.imgur.com/ustNQ.jpg"></div>

Answer 2

对于 exif 部分，您无法使用 css 来完成此操作，因为 css 无法准备好 exif 数据。

但对于 CSS 部分，您transform-origin不仅需要使用 ，transform还需要使用宽度 100% 和高度 auto 来保持比例。

这是一个例子： http: //jsfiddle.net/yxqgt2d1/1/