CSS - 如何旋转和全屏显示图像？答案

【问题标题】：CSS - How to rotate and fullscreen an image?CSS - 如何旋转和全屏显示图像？
【发布时间】：2018-12-31 02:04:13
【问题描述】：

我正在尝试实现一些我认为很容易的事情，但与 HTML/CSS 一样，情况并非如此 ^^

我有一张图片列表（它们是分析图表），最大宽度设置为 100% 以适应屏幕尺寸。一切都是好的。当我单击图像时，如果屏幕处于纵向模式（强制用户切换到横向模式，即旋转设备），我会将图像“全屏”并旋转 90 度 ）。图像应该占据所有可用空间并且应该居中（水平和垂直）。应该保持纵横比。

我已成功旋转图像，但它在屏幕顶部展开，因此我必须将其平移到底部大约 30%...但这并不准确... 为了决定图像是否应该旋转，我使用了带有方向的媒体查询。

function enlarge(element) {
  element.classList.toggle("enlargeImg");
}

body {
  background-color: powderblue;
}

.image {
  background: grey;
  max-width: 100%;
  transition: all 1s ease;
}

.enlargeImg {
  transform: rotate(90deg) translate(35%, 0);
  transition: all 1s ease;
  max-height: 100%;
  position: absolute;
  left: 0;
  right: 0;
}

<center>
  Texte avant<br>
  <img class="image" onClick="enlarge(this)" src="https://preview.ibb.co/iNVyTd/Graph_Monthly_Expenses_1270.png" />
  <img class="image" onClick="enlarge(this)" src="https://preview.ibb.co/jj6GEJ/Graph_Yearly_Expenses_1270.png" />
  <br>Texte après
</center>

可用技术：CSS、JQuery

到 JSFiddle 的链接：https://jsfiddle.net/8wLbcrqd/10/

感谢您的宝贵帮助！

【问题讨论】：

标签： jquery html css image rotation

【解决方案1】：

尝试：
.image {
背景：灰色；
最大宽度：100%；
宽度：自动；
高度：自动；
过渡：全为 1；
}

.enlargeImg {
变换：旋转（360 度）；
顶部：0;
底部：0;
过渡：全为 1；
最大高度：100%；
宽度：100%；
高度：100%；
位置：绝对;
左：0;
右：0；

【讨论】：

放大的图像必须旋转 90 度。这是我遇到的问题。感谢您的帮助:)