Adjust width and height of div or image based on screen size (viewport)

by skybers
You may need to adjust the height of Div or Image based on the Viewport Height in some cases for the Responsive adjustments. Well, you can achieve this via simple CSS no JS needed.
Example for Adjusting Div width:
#myDiv { width:90%; /* Fallback incase the browser doesn't support */ width:calc(100% - 50px); /* This will calculate the 100% viewport height minus 50px */ }
Example for Adjusting the Image height:
#myImage { width:auto; max-height:calc(100vh - 50px); /* This will calculate the 100% viewport height minus 50px */ }
You can use calc() with basic four Math operators i.e. +(plus), – (minus), * (multiply), / (divide). It will work mostly on all modern browsers you can check the reference regarding the calc() function on W3C
Recommended Posts

How to use require field in bootstrap form?
July 25, 2018

Removing ‘blue border’ from input text field
July 12, 2018

Bootstrap NavBar with left, or right aligned items
June 7, 2018