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!

Have you seen this article http://css-tricks.com/perfect-full-page-background-image/ — elclanrs, Jan 29 '14 at 22:29
ya but it only show how to set background image, doesn't tell us how to add an image element to have matched size. — FlyingCat, Jan 29 '14 at 22:40
Just think that any tag can have a background image; an `img` tag too. — elclanrs, Jan 29 '14 at 22:42
I'm not 100% sure what you are asking. Are you wanting to size the image with a set size, or to position it (i.e., center it or something)? — samanime, Jan 29 '14 at 23:10
possible duplicate of [How can I resize an image dynamically with CSS as the browser width/height changes?](http://stackoverflow.com/questions/4684304/how-can-i-resize-an-image-dynamically-with-css-as-the-browser-width-height-chang) — Zach Saucier, Jan 29 '14 at 23:33

score 0 · Answer 1 · answered Jan 29 '14 at 23:47

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.

How to set image size dynamically?

1 Answers1