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

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