CSS: the resize property

Tweet

With the introduction of CSS3, one of the new properties available is resize. With it we are able to make an element resizable vertically, horizontally or both.
We have to take note that the property is available only for Firefox, Chrome and Safari. For those browsers, some elements like the textarea are considered resizable by default (and you may have already noticed that).
Let's see how to use it.

JavaScript: set image height according to viewport

Tweet

I've recently had to deal with a strange situation in a web project. I basically had an image in the home page which filled roughly the 60 percent of the viewport. The image was responsive and it was adapting to the browser window size. The problem was: the image was resizing following its width and it was not shrinking after a certain point. The result was that when viewed with a 16:9 monitor, the image was somehow too tall to fit the screen and the annoying vertical scrollbar made its appearance (which was meant, for the rest of the pages needed it).
Solution? Well, I decide to use JavaScript and specifically window.innerHeight in order to control the image height according to the viewport.
Before getting into the actual code, I need to explain some things, so bear with me and be patient.