Question

我正在具有容器的网站上创建东西。该容器不能再变宽（它可以变高一些-可以放大屏幕的尺寸）

在此容器中，我将设置图像。它们的大小各不相同。

这些图像/ SVG具有单击按钮即可旋转的能力（如代码所示）。我目前正在使用90度，但以后可能需要45度。

我的问题是，旋转时图像溢出了容器。旋转时，我需要它在容器内缩放。（容器的底部应该是可扩展的，但顶部不能扩展）。我在这里查看了其他线程，它们要么对比例尺进行了硬编码（仅在您具有单个图像的情况下才有效），否则该代码对我而言并不十分适用。

谢谢大家。

这让我做噩梦已有一段时间了。

这是我的代码

var myArray = ['0deg', '90deg', '45deg','180deg','270deg']; var myIndex = 1; 
function nextRotation() { return 'rotate('+myArray[myIndex++%myArray.length];+')' };

$('#btn1').click(function(){
    $('#testImg').css('transform', nextRotation() );
    $('#testImg').css('-webkit-transform', nextRotation() );
    $('#testImg').css('-moz-transform', nextRotation() );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick=document.getElementById('testImg').src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/smile.svg'>Img1</button>
<button onclick=document.getElementById('testImg').src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/juanmontoya_lingerie.svg'>Img2</button>
<button onclick=document.getElementById('testImg').src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/php.svg'>Img3</button>
<button type="button" id="btn1" >Rotate Div</button>

<DIV id="container" style=" wid th:60%;border-style:dotted;">

  <DIV id="outer" width="100%">
    <img id ="testImg" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/smile.svg"   style="width:100%;height:100%;">
  </DIV>
</DIV>

Answer 1

通过将图像的高度与容器的宽度匹配，可以使它正常工作。我还确定了容器的相对位置。

请注意，您还正在处理图像的透明性，因此看起来就像在留下一堆空白。

我刚刚添加了：

$('#testImg').css('height', $('#container').width() );

This looks to be working, but may stretch the image

CSS + jQuery：在容器内缩放，居中和旋转图像

1 个答案: