Question

我正在尝试使容器中的图像在缩放时不离容器底部超过15像素。做这个的最好方式是什么？我弄乱了getBoundingClientRect（）之类的东西，但是还没有找到实现它的关键。这是我的问题的一个例子。

function myFunction() {
    var img = document.getElementById('image');

    img.style.WebkitTransform = ('scaleY(2.0)');
    img.style.width = img.getBoundingClientRect().width + 'px';
    img.style.width = img.getBoundingClientRect().height + 'px';
}

.rand {
    width:50px;
    height:50px;
    position:absolute;
    bottom:15px;
    left:45%;
}

div#test {
    margin:auto;
    border:2px solid red;
    width:200px;
    height:200px;
    object-fit: contain;
    overflow: hidden;
    position:relative;
}

<div id='test'>
    <img id='image' class='rand' src = 'https://www.purebuttons.com/cp/Pure_Buttons/html/images/squareprev.png'>
    </div>
   
    <button onclick='myFunction()'>CLICK</button>
</body>

因此，图像要完全放大和缩小，但仍要位于距底部15像素的位置，并且一旦缩放就不能降低。感谢您的帮助。

Answer 1

您可以更改类以使其与位置一起玩，而不是更改属性。

function myFunction() 
{
    var img = document.getElementById('image');

    //img.style.WebkitTransform = ('scaleY(2.0)');
    img.className = 'rand2';
}

.rand 
{
    
    width:50px;
    height:50px;
    
    display:block;
    position:absolute;
    
    bottom:15px;
    left:45%;
    
    border:1px solid red;
}

.rand2
{
    
    width:50px;
    height:50px;
    
    display:block;
    position:absolute;
    
    transform: scaleY(2.0);
    
    bottom:35px;
    left:45%;
    
    border:1px solid red;
}

div#test {
    margin:auto;
    border:2px solid red;
    width:200px;
    height:200px;
    object-fit: contain;
    overflow: hidden;
    position:relative;
}

Answer 2

可能最简单的方法是将转换设置为从transform-origin的底部开始：

function myFunction() {
    var img = document.getElementById('image');

    img.style.transform = 'scale(2.0)';
}

.rand {
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 15px;
    left: 45%;
    transform-origin: center bottom;
}

#test {
    margin: auto;
    border: 2px solid red;
    width: 200px;
    height: 200px;
    overflow: hidden;
    position: relative;
}

<div id='test'>
    <img id='image' class='rand' src='https://i.stack.imgur.com/YxTTq.png'>
</div>
   
<button onclick='myFunction()'>CLICK</button>

如何使缩放后的图像不超过其容器

2 个答案: