I’m trying to create an HTML, maybe a div to behave like the following:

  • Resize automatically his height to be 100% based on your window
  • Adjust it’s width to maintain constant proportions - example width would be always equal to 4/5 of his height.

I’ve been trying to configure it with css however I might need to use JavaScript. If you guys have any other solutions not in JavaScript but anything else like jQuery, I would be happy to use it as well.

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
1 answer

Hi @fkutev22,

I’m not really into plain JavaScript so I’ll give you an example using jQuery.

$(window).resize(function(){
    $('#resizeWindow').width($('#resizeWindow').height()*4/5);
});

$(window).trigger('resize');

I’ll recommend using the above code with a div. Here is an example

<div id="resizeWindow"> </div>

Regards,
KDSys

  • I’ve been trying to implement it however nothing has been happening.
    The div is just like a plain element.

    • Hi @fkutev22,

      Have you added jQuery to your website?

      If you haven’t just add this in the footer of your HTML page

      <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      

      Regards,
      KDSys

      • If I wish to use the above query on other HTML elements how should I proceed?

        • To use jQuery on your elements you have two options, either use it with the ID of the element or with a class.

          If you wish to bind your jQuery with an ID you can do the following :

          $('#IdOfTheElement').val();
          

          If you wish to bind your jQuery with a class, you can do the following:

          $('.nameOfClass').val();
          

          Regards,
          KDSys

Submit an Answer