从底部到顶部javascript缩放图像

Question

我一直在尝试在javascript中缩放图像，因此它是屏幕宽度的15％。问题是现在javascript automaticcaly从上到下扩展，我想从下到上扩展。先感谢您！ ps：包含jquery库。

html：

<img id = "image" src = "https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>

js：

document.getElementById("image").width=window.innerWidth * 0.15;

Answer 1

首先，你不需要jQuery，也不需要任何JavaScript来让你按照自己的意愿工作。它可以在纯CSS中完成。

其次，这不是图像缩放方式的问题，而是在缩放图像后定位图像的问题。

请参阅my jsfiddle，了解如何使用纯CSS完成此操作，并根据您的需要定位。

HTML：

<div id='imagewrapper'>
    <img id = "image" src = "https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"/>
</div>

CSS：

#image {
    width: 15vw;
    position: absolute;
    bottom: 0;
    right: 0;
}

#imagewrapper {
    position: relative;
    width: 768px;
    height: 576px;
}