设置变换后的图像宽度和高度：旋转

Question

我有一个宽度为div的div：190px和高度：260px，我在该div上分配img标签，当我上传一张显示图像之前的图像时，之后我旋转图像但是图像的宽度和高度没有改变像div，我使用继承，一切关于位置和显示，但没有任何好处..

Answer 1

<强>嗨，

请尝试使用此代码。

＆＃13;

＆＃13;

var $=jQuery.noConflict();
$(document).ready(function(){
	$('#RotateButton').click(function(){
	   $('.col').toggleClass("afterRot");
	});
});
/* ----- IE Support CSS Script ----- */
var userAgent, ieReg, ie;
userAgent = window.navigator.userAgent;
ieReg = /msie|Trident.*rv[ :]*11\./gi;
ie = ieReg.test(userAgent);
if(ie) {
  $(".col").each(function () {
    var $container = $(this),
        imgUrl = $container.find("img").prop("src");
    if (imgUrl) {
      $container.css("backgroundImage", 'url(' + imgUrl + ')').addClass("custom-object-fit");
    }
  });
}

＆＃13;

body { padding: 0; margin: 0; }
.col { position: relative; display: block; width:100vh; height: 100vh; }
.afterRot{ transform: rotate(90deg); object-fit: cover; }
.col img { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%;	object-fit: cover; }
.custom-object-fit { position: relative; background-size: cover; background-position: center center; }
.custom-object-fit img { opacity: 0; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mob">
	<button type="button" id="RotateButton"> Rotate </button>
	<div class="col">     
    	<img class="nor" id="rowImg" src="https://cdn-images-1.medium.com/max/1600/1*tSyuv3ZRCfsSD5aXB7v8DQ.png">
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我想出了一种自动化的方法，如下所示：

首先，我得到了图像的自然高度和宽度（通过onload触发器）：

naturalWidth = event.currentTarget.naturalWidth
naturalHeight = event.currentTarget.naturalHeight

然后我正在使用宽高比计算转换比例并生成如下转换样式（伪代码）：

对于90度（y位移）：

  const scale = naturalWidth > naturalHeight ? naturalHeight / naturalWidth : 1
  const yshift = -100 * scale
  const style = "transform:rotate(90deg) translateY("+yshift+"%) scale("+scale+"); transform-origin: top left;"

对于270度（x位移）：

  const scale = naturalWidth > naturalHeight ? naturalHeight / naturalWidth : 1
  const xshift = -100 * scale
  const style = "transform:rotate(270deg) translateX("+xshift+"%) scale("+scale+"); transform-origin: top left;"

希望这会有所帮助。

Answer 3

我认为这是因为您没有删除已经与Image关联的类。尝试将此添加到按钮

$(document).ready(function(){
$('#RotateButton').click(function(){
   $('#rowImg').removeClass("normalx").addClass("afterRot");
});
});

对于像

这样的CSS

.col {
  width:260px;
  height:190px:
  border: solid 1px #6c757d;
  padding: 10px;
}
.nor{
  width:250px;
  height:150px;
}
.afterRot{
  width:inherit;
  transform: rotate(90deg);
}

我有一个示例here

Answer 4

  

继承不起作用。   因为您必须将图像的宽度设置为父级的高度。然后它将在父元素中完全调整大小。

image-width = parent-height

因为在应用了transform属性之后，width和height属性也将在其方面进行旋转。

Sol 1： 更改图像的宽度以及transform属性。 （如果它是可变的，那么您可以使用SCSS变量为图像宽度和父高度分配相同的值。）

Sol 2： 这不是完美的解决方案，但在许多情况下都可以使用。将scale属性添加到您的转换属性中，如此

transform: rotate(90deg) scale(.7);

根据您调整比例值。