Streaming live at 10am (PST)

Resizing image relative to browser viewport


#1

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:)


#2

Hi there,

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

Thanks smile


#3

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


#4

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 `<script></script>` tags and put that in `before </body>` custom code section `:)`

#5

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


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.