Question

我正在尝试实现一些我认为很容易实现的目标，但与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/

感谢您的宝贵帮助！

Answer 1

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

.enlargeImg {
  变换：rotate（360deg）;
  顶部：0；
  底部：0；
  过渡：全1；
  最大高度：100％；
  宽度：100％；
  高度：100％；
  位置：绝对；
  左：0;
  正确：0；

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

1 个答案: