Javascript 使图像在变换后填充容器（90度）

我想有一个图像旋转和填充后，它被加载的容器。我遇到的问题是加载时高度会自动设置，旋转后不会重置。以下是该问题的一部分：

$（'.load'）。在（“单击”，函数（）{
var image=$（'.image'）；
image.attr（“src”https://s-media-cache-ak0.pinimg.com/736x/f5/a0/62/f5a0626a80fe6026c0ac65cdc2d8ede2.jpg");
addClass（'rotate-image'）；
});
.image{
最大宽度：100%；
最大高度：100%；
}
.旋转图像{
变换：旋转（90度）；
}



加载
这需要删除
最大宽度
和
最大高度
样式

为了适合图像，必须将其放大，使其宽度（旋转时的高度）与容器的高度一样大。然而，它只是在视觉上旋转，浏览器并不关心这一点，因为
transform
不会改变网站的流量。对于它，有一个“未旋转”的图片，其高度现在比它的容器大。视觉上旋转图像不会改变任何东西。为此，需要将图像上拉，使其像素数等于其比父图像大多少。这些像素被二除，因为图像仅在底部溢出

玩游戏来了解我的意思


$（'.load'）。在（“单击”，函数（）上）{
var image=$（'.image'）；
image.attr（“src”https://s-media-cache-ak0.pinimg.com/736x/f5/a0/62/f5a0626a80fe6026c0ac65cdc2d8ede2.jpg");
addClass（'rotate-image'）；
var parentHeight=image.parent（）.height（）；
css（“宽度”，parentHeight+“px”）；
css（“位置”、“相对”）；
css（“底部”（（image.height（）-parentHeight）/2）+“px”）；
});
。旋转图像{
变换：旋转（90度）；
}



加载
您需要通过javascript或jquery来完成。你的目标是：

.旋转\u Img

宽度=父高度的100%

高度=父宽度的100%

我认为css对此没有任何想法，直到父级宽度和高度与ViewPortvw和vh相关

jquery：

$('.Rotated_Img').each(function(){
  $(this).css('width', $(this).parent().height() + 'px');
  $(this).css('height', $(this).parent().width() + 'px');
});

您希望它按宽度和高度填充容器，还是仅按高度填充容器？我希望图像保持纵横比，填充更合适，因此在示例中，旋转后将是高度。添加
width:100px进入
rotate image
类。我需要解决方案能够响应并处理各种图像。我认为如果没有某种技巧，这是不可能做到的<代码>转换
只是在视觉上旋转元素，而网站的流程保持不变。这将是相当困难的匹配，现在旋转的图像尺寸与它所包含的任何内容，因为该网站认识到图像没有旋转。事实上，你把它看作是旋转的，这不会改变任何东西。我想，这会丢失图像的纵横比吗？当然。如果你想要相同的比例，你只需要设置宽度或高度，另一个是自动`$css（'height'，'auto'）；将其设置为
auto
将不起作用，因为浏览器不知道其实际宽度或高度。如果这样做可行，如果图像旋转45度会发生什么？网站有自己的流程，
auto
就是根据这个流程设置的。CSS
transform
不会改变流程。你说浏览器不知道它的实际宽度或高度是什么意思？图像的宽度还是高度？浏览器知道图像的宽高比。要旋转45度，您需要计算图像的对角线，并设置
（高度^2）+（宽度^2）=父高度
或类似的计算。这不是（你想要的）流行的东西，也没有已知的解决方案，你需要努力去做。浏览器不知道当你将图像旋转90度时，它的宽度现在是它的高度，它的高度现在是它的宽度。这就是为什么我认为
auto
不起作用的原因。溢出：隐藏在容器上使其成为理想的解决方案，非常感谢。我将实现它并将其标记为应答感谢您的额外编辑，实际上我已经有了解决方案，使用一个函数获取远程URL的宽度/高度，然后旋转代码在回调中