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

• 正常图像应为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>

使元素的高度等于宽度，反之亦然，这是一个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>

您可以在JavaScript中通过检查容器高度并将图像的maxWidth设置为容器的高度来完成此操作。

/**
 * Set max width of a rotated image to container height
 * @param {*} container
 * @param {*} image
 */
function setRotatedImageWidth(container = null, image = null) {
    if (!container || !image) {
        return false; // exit if empty
    }
    var h = container.offsetHeight; // Container height
    var w = image.offsetWidth; // Image width

    // If image width is greater container height
    if (w > h) {
        image.style.maxWidth = h + 'px';
    }
}

var container = document.querySelector('.container');
var image = container.querySelector('img');
setRotatedImageWidth(container, image);

我终于找到了我需要这个问题的答案，也许它会帮助别人。我有一个Flex的父母和孩子，我需要旋转的基础上EXIF。我需要图像方向：从图像;

imgBox {
    flex: 1;
    padding: 1rem;
    overflow: hidden;
 }

 .img1 {
     object-fit: cover;
     max-width: 100%;
     image-orientation: from-image;
 }

这里有一个需要手动同步宽度/高度的尝试，对于那些愿意使用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;
}

我使用图像的自然宽度和高度来计算变换比例，如我在以下位置所记录的：
https://stackoverflow.com/a/61620946/7037600

对于exif部分，你不能用css来做，因为css无法准备好exif数据。
对于CSS部分，你需要使用transform-origin，而不仅仅是transform，还需要使用宽度100%和高度自动保持比例。
下面是一个例子：http://jsfiddle.net/yxqgt2d1/1/