How to set image size dynamically?

Question

I am trying to place an image element on top of the background image.

The image element will need to animate based on user's action. I have my background image css like the following:

css

body {
    background: url('test.png') no-repeat center center;
    -webkit-background-size: 100% auto;
    background-color: #00ABBA;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
}

html

<div> <img src='ball.png' /> <div >

so the background image will always be 100% of the screen and be responsive.

However, the image element has a set size and I am not sure how to set the size to accommodate the background image size (bigger screen has bigger background image/ smaller screen has smaller background image).

Can anyone help me to set the image element with the consistent size with background image? Thanks a lot!

Answer 1

You have a couple of options here.

Most of them boil down to comparing some "base size" of the background image to it's actual size.

Let's say you pick out your numbers when your background is 1000px wide and 700px tall. That is our base size.

var baseWidth = 1000;
var baseHeight = 700;

Now we need to know what we actually ended up with. To do this, we get the size of the element with the background. Let's say the div has an ID of "background" for simplicity sake.

var backgroundElement = document.getElementById('background');
var currentWidth = backgroundElement.width;
var currentHeight = backgroundElement.height;

(Note, padding, margin, border, etc. can affect the sizing of the width, so you probably want to use a third party library like jQuery or make sure you take those in to account yourself if they are applicable to ensure an appropriate measurement).

Then, we want to know, relatively speaking, how much we changed.

var scaleWidth = currentWidth / baseWidth;
var scaleHeight = currentHeight / baseHeight;

If we are larger than the base, scale* is greater than 0. If it's smaller, scale* is less than zero.

Now, we decide what we want to do. Let's assume the image element has an id of "image".

var image = document.getElementById('image');

If we want to increase the image and don't care about saving aspect ratio:

image.width = image.width * scaleWidth;
image.height = image.height * scaleHeight;

If we do want to save aspect ratio and want to keep it all within the div.

image.width = image.width * Math.min(scaleWidth, scaleHeight);
image.height = image.height * Math.min(scaleWidth, scaleHeight);

(Note, if the aspect ratio can change drastically, that snippet is a bit more complicated because you'd have to make sure the resulting size is small enough to still fit after the fact. Sometimes the scale you need would be smaller than both scaleWidth and scaleHeight).

If you want to shift it's position, make it absolutely positioned and then move it by a scaled amount.

// Assumes it already has an absolute position of top and left already set.
image.style.left = parseInt(image.style.left.replace(/[a-z]+$/, '') * scaleWidth;
image.style.top = parseInt(image.style.top.replace(/[a-z]+$/, '')) * scaleHeight;

And so on...

Basically, once you have decided on a base size and know your scale, you can start making tweaks relative to your base, which can then be scaled up to your background.