Resizing image relative to browser viewport

[ua_iaroslav (Iaroslav Zhmak)]

Hello everyone! I need some help. For a very long time can not understand. I want to do so to change the size of the image relative to the height of the browser. Here is an example:
enter link description here

If you know what to do, please tell me! Thank you:)

[Arthur (Arthur James)]

Hi there,

Could you please give us a read only link and a description of exactly how you want the final site to look?

How to Enable a Webflow Share Link

Thanks

[ua_iaroslav (Iaroslav Zhmak)]

No problem. I have spoken to over the device image in the slider
https://preview.webflow.com/preview/iaroslavzhmak?preview=1ed590c9d38a23fa0b6786e36f605dfb

[bartekkustra (Bartosz Kustra)]

hey @ua_iaroslav :)

Although I haven’t tested this one, I believe this should work.

$(document).ready(function() {
	// config
	var ic = $('.imageclass');
	
	// do not touch unless you know what you're doing
	var isw = ic.width();
	var ish = ic.height();
	var ir = isw/ish;
	var ivh = $(window).height();
	var sctv = ish / ivh;
	$(window).resize(function() {
		ic.css('width', $(window).height() * sctv * ir);
	});
});

Please change the classname of img .imgclass in config line. If that doesn’t work get back to me and I’ll try to rewrite my code so it works.

Best,
Bartosz

---

P.S. You should wrap the code with `` tags and put that in `before ` custom code section `:)`

[ua_iaroslav (Iaroslav Zhmak)]

@bartekkustra

$(document).ready(function() {
// config
var ic = $(‘.imageclass’);

// do not touch unless you know what you're doing
var isw = ic.width();
var ish = ic.height();
var ir = isw/ish;
var ivh = $(window).height();
var sctv = ish / ivh;
$(window).resize(function() {
	ic.css('width', $(window).height() * sctv * ir);
});

});

Thank you very much. But, this method doesn’t work in my site, maybe I’m doing something wrong.