proportional to the width of the window to change the width of the div with jquery

Question

I changed the width of the browser you want to change in proportion to the width of an image in the content.

For example, at first;

Browser Width: 1600 px | Height: 800 px
Image Width: 1024 px | Height: 660 px

After the time has changed;

Browser width: 1200px | height: 600px
image width: 600px | height: 400px such as ..

This is how we will establish the proportions I could not .. Waiting for your help. Thanks in advance.

Answer 1

Just use a percentage width and height

HTML:

<img src="http://lorempixel.com/1024/600"/>

CSS:

img {
    width: 65%;
    height: 80%;
}

See JSFiddle

Answer 2

If you want to resize the image whilst maintaining the same aspect ratio, don't set a width AND height. Only adjust one.

CSS solution:

@media only screen and (max-width: 1600px) {
    img {
        width: 1024px;
    }
}

@media only screen and (max-width: 1200px) {
    img {
        width: 600px;
    }
}

Fiddle

---

jQuery solution:

$(window).resize(function() {
    var theWidth = $(window).width();

    if (theWidth >= 1600) {
        $(img).css('width','1024px');
    } else if (theWidth < 1200) {
        $(img).css('width','600px');
    }
});

Fiddle

Resize tends to fire multiple times in some browsers so if you want to use jQuery you might want to try a solution like this: window.resize in jquery firing multiple times