CSS 图像查看器:图像旋转(和缩放）

CSS imageviewer: Image rotation (and scaling)

本文关键字：图像 旋转 缩放 CSS      更新时间：2023-09-26

我正在尝试在我的反应项目中拥有一个简单的图像查看器。有没有办法在不引用 JS 中 DOM 节点的当前尺寸的情况下实现旋转（理想情况下是缩放）？

到目前为止，我尝试了这样的事情（减少大小写/取自我的jsfiddle）： 

function getTransform() {
    switch (rotation) {
    case 90: return { 
        transform: 'translateY(-100%) rotate(90deg)', 
      'transform-origin': 'bottom left'
     };
    case 180: return {
        transform: 'translate(100%, -100%) rotate(180deg)', 
      'transform-origin': 'bottom left'
    }
    case 270: return { 
        transform: 'translateX(-100%) rotate(270deg)', 
      'transform-origin': 'top right'
     };
     default: return {
        transform: 'none'
     }
  }
}

并将其作为样式应用于我的元素。不幸的是，这行不通。虽然我可以对 Y 使用 100%/相对值（即 90 度有效，至少 180 度适用于 Y 轴），但我不能使用它来平移 X 轴 - 图像的某些部分在屏幕外。

演示：https://jsfiddle.net/7huLa8e1/2/

有没有办法单独使用相对值，或者我是否必须抓住 DOM 节点并在绝对像素值中使用宽度/高度才能完成这项工作？

如果我正确理解您的问题，您的问题是图像以未指定的大小向右溢出容器。

我们需要解决这个问题。我的想法是将图像漂浮在容器内。我们需要一个明确的修复程序来保持它采用正确的大小。

我已经重做了jquery以使用css类，因为它是修改子（图像）的最简单方法

var rotation = 0;
function rotate(deg) {
	rotation = (360 + rotation + deg) % 360;
  $('#image-viewer').attr('class',  'rotate' + rotation);
}
$(function(){
$('#rotateLeft').click(
	function(event) {
  	rotate(-90);
  }
);
$('#rotateRight').click(
	function(event) {
  	rotate(90);
  }
);
});
#image-viewer {
  position: relative;
  cursor: pointer;
  border: solid red 2px;
}
.image-viewer-root {
  height: 100vh;
}
.image-viewer-viewport {
  height: 90%;
  overflow: auto;
}
.rotate90 {
  transform:  rotate(90deg) translate(0%, -100%);
  transform-origin: left top;
}
.rotate180 {
  transform: rotate(180deg);
  transform-origin: center center;
}
.rotate180 img {
  float: right;
}
.rotate270 {
  transform: translate(-100%, 0%) rotate(270deg);
  transform-origin: right top;
}
.rotate270 img {
  float: right;
}
.clearfix {
  clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-viewer-root">
  <nav class="toolbar navbar navbar-dark bg-faded">
    <div class="nav navbar-nav">
      <button id="rotateLeft" class="btn nav-item">RotateLeft</button>
      <button id="rotateRight" class="btn nav-item">RotateRight</button>
    </div>
  </nav>
  <div class="image-viewer-viewport">
    <div id="image-viewer">
      <img src="https://sstatic.net/stackexchange/img/logos/so/so-logo.png?v=9c558ec15d8a">
      <div class="clearfix"></div>
    </div>
  </div>
</div>

相关文章：