我正在使用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>有没有办法实现这个目标？
对于全屏显示，最简单的解决方案是使用视口单位指定图像的宽度和高度：
可以使用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>使元素的高度等于它的宽度，反之亦然，这是一个Javascript的东西，因为它可以检索这些值并将它们设置回来。
在CSS中没有办法实现这一点，也没有办法实现动态维度，我们不知道100%完全等于什么，即使我们无法使用它们，因为没有对它们的引用。
但是，如果您使用固定值，可以使用媒体查询进行操作，那么为什么不使用变量，这样我们就可以获得值，以及对它的引用。
:root {
--width: 100px;
--height: 140px;
}
div.top {
position: fixed;
width: var(--width);
height: var(--height);
border: 1px solid blue;
}
img {
width: var(--width);
height: var(--height);
animation: rotate 3s alternate infinite;
}
/* translate values are the difference between the height */
/* and width divided between the X and Y */
/* 100 - 140 = 40 / 2 = 20px each */
@keyframes rotate {
to {
transform: rotate(90deg) translate(20px, 20px);
width: var(--height);
height: var(--width);
}
}<div class="top">
<img src="http://www.androidpolice.com/wp-content/uploads/2014/02/nexusae0_wm_DSC02232.jpg">
</div>然后，这只是一个想法。
我可能会选择这样的东西（使用视口大小调整交换最大宽度/高度）
* {
box-sizing:border-box;
}
html, body {
margin:0;
}
div.top {
position: fixed;
width: 100%;
height: 100%;
top:0;
left:0;
border: 1px solid blue;
display:flex;
}
img {
transform: rotate(90deg);
max-width: 100vh;
max-height: 100vw;
margin:auto;
}<div class="top">
<img src="http://www.androidpolice.com/wp-content/uploads/2014/02/nexusae0_wm_DSC02232.jpg">
</div>这是一个很小的尝试，需要手动同步宽度/高度。对于那些愿意使用JS的人来说，这应该很容易同步。
这里是：
div.top {
border: 1px solid blue;
box-sizing: border-box;
width: 100%;
height: 300px;/* SYNC */
position: relative;
overflow: hidden;
}
div.top:before {
content: "";
position: absolute;
width: 300px;/* SYNC */
height: 100%;
transform: rotate(90deg);
background-image: url(http://www.androidpolice.com/wp-content/uploads/2014/02/nexusae0_wm_DSC02232.jpg);
background-size: contain;
background-repeat: no-repeat;
}<div class="top"></div>定位变得尴尬。但是，我希望有人会从这里分支并召集出更好的解决方案。
如果您可以忽略变换部分，因为它是纵横比的问题，并且没有答案，但是可以将图像显示到100％的父元素，并且不需要任何媒体查询。 100％是相对于父级的，而对于图像，它是规范维度的宽高比。我们可以拉伸它，但这不符合目的。希望低于css可能会在某种程度上帮助你。
div.top {
position: fixed;
width: 100%;
height: 100%;
border: 1px solid blue;
background-image:url("http://www.androidpolice.com/wp-content/uploads/2014/02/nexusae0_wm_DSC02232.jpg");
background-size:cover;
background-repeat:no-repeat;
background-position:50%;
}
div.top img {
/* transform: rotate(90deg); */
min-width: 100%;
min-height: 100%;
visibility:hidden;
}
对于exif部分你不能用css做，因为css无法准备exif数据。
但是对于CSS部分，你需要使用transform-origin，而不仅仅是transform，并且还使用宽度100％和高度自动保持比率。
这是一个例子：qazxsw poi