CODEWITHSUNDEEP
javascriptjqueryhtml
ThijsVijver
ThijsVijver

Reputation: 31

scaling an image from bottom to top javascript

I have been trying to scale an image in javascript so it is 15% of the screen width. The problem is now that javascript automaticcaly scales from the top down and i want to scale from bottom to top. Thank you in advance! ps: jquery library is included.

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;

Upvotes: 0

Views: 53

Answers (1)

bbailes
bbailes

Reputation: 371

First, you do not need jQuery, nor any JavaScript at all to get this to work as you would like. It can be done in pure CSS.

Second, this is not an issue with the way images scale, but an issue with positioning the image after it has been scaled.

Please see my jsfiddle showing how to accomplish this with pure CSS and position how you would like.

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;
}

Upvotes: 1

Related Questions