Question

我想让图像旋转并在装入后填充容器。我遇到的问题是加载后自动设置高度，然后在旋转后不重置。这是一个问题的JSFiddle：

/users/1

$('.load').on("click", function () {
	var image = $('.image');
  
  image.attr("src", "https://s-media-cache-ak0.pinimg.com/736x/f5/a0/62/f5a0626a80fe6026c0ac65cdc2d8ede2.jpg");
  
  image.addClass('rotate-image');
  
 });

.image {
  max-width: 100%;
  max-height: 100%; 
}

.rotate-image {
  transform: rotate(90deg);
}

Answer 1

但这需要删除max-width和max-height样式。

为了适合图像，必须将其放大，使其宽度（高度，旋转时）变得与容器的高度一样大。但是，它只是在视觉上旋转，浏览器并不关心这一点，因为transform并未改变网站的流量。对于它，有一个＆＃34;未旋转＆＃34;高度现在大于容器的图片。视觉旋转图像不会改变任何东西。为此，需要使用等于其大于父级的像素的数量来提取图像。这些像素除以2，因为图像仅在底部溢出。

使用fiddle进行游戏，了解我的意思。

＆＃13;

$('.load').on("click", function() {
  var image = $('.image');
  image.attr("src", "https://s-media-cache-ak0.pinimg.com/736x/f5/a0/62/f5a0626a80fe6026c0ac65cdc2d8ede2.jpg");
  image.addClass('rotate-image');

  var parentHeight = image.parent().height();
  image.css("width", parentHeight + "px");
  image.css("position", "relative");
  image.css("bottom", ((image.height() - parentHeight) / 2) + "px");
});

＆＃13;

.rotate-image {
  transform: rotate(90deg);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="img-container" style="background:black; height:100px; width: 200px; text-align:center">
  <img class="image" src="" />
</div>

<br />
<button class="load">Load</button>

＆＃13;

修改：注意，如果您通过设置src加载来自外部来源的图像并立即旋转它，image.height()可能会返回0并且图片可能会被取代。然后，如果再次单击，它的高度现在是正确的，并且它被放置正确。

我不是很确定，但我认为这是因为当你加载图片时，浏览器需要先下载它，这意味着你还不知道它的尺寸是什么。

要了解相关信息，请在我提供的小提琴中粘贴Google提供的一些图片网址。

Answer 2

您需要通过javascript或jquery执行此操作。你的目标是：

.Rotated_Img ...

宽度=父高度的100％

height =父宽度的100％

我不认为css有任何想法，直到父宽度和高度与视口 vw和vh 相关。

jquery的：

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

变换后图像填充容器（90deg）

2 个答案: