旋转图片后设置其宽度和高度

Question

我有一个宽度为190px和高度为260px的div，我在这个div上放置了img标签，并上传了一张图片。当我旋转这张图片时，它的宽度和高度没有像div一样改变。我尝试使用继承、位置和显示等方法，但都无济于事。

- Yosafat Ksatria

---

尝试更改尺寸但不要旋转，并将其CSS的object-fit设置为cover。 - zer00ne

还是不行，我之前试过了。 - Yosafat Ksatria

尝试将高度和宽度设置为100％。 - Sagar

我也是，没有改变，我正在使用 max-height 和 max-width 来保持图像分辨率。 - Yosafat Ksatria

Answer 1

我已经想出了以下自动化的方法： 首先，我会获取图像的自然高度和宽度（通过onload触发器）：

var naturalWidth = event.currentTarget.naturalWidth
var 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;`

希望这可以帮助你。

- donlys

Answer 2

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

图片宽度 = 父元素高度

因为应用转换属性后，宽度和高度属性也会按其相对角度旋转。

解决方案1： 同时更改图像的宽度和转换属性（如果它是可变的，则可以使用SCSS变量为图像宽度和父元素高度分配相同的值）。

解决方案2： 这不是完美的解决方案，但在许多情况下都有效。在转换属性中添加比例属性，例如：

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

根据您的需求调整比例值。

- Rajat Jain

Answer 3

嘿，

请尝试这段代码。

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");
    }
  });
}

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; }

<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>

- Dhaval Patel

---

好的答案，这就是我在寻找的原因。 - Yosafat Ksatria

Answer 4

我认为这是因为您没有删除与图像已关联的类。尝试将此代码添加到您的按钮中：

$(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);
}

我有一个样例在这里

- Bhaskar