Let Users Resize Page Elements

Permitting users to resize objects on the page is easy. The examples below illustrate the CSS property, resize.

Don't forget, this is an example, and the JavaScript code is included in the source. You should remove it and include it as .js file for production use.

Below is a DIV example. Remember these tips:

  1. The resize CSS property can be used on any HTML element.

  2. Limit the resizing to horizontal, vertical, or both in the CSS. This example uses both.

  3. Without using cookies or other type of local storage, the resize property is not persistent.

Try it! Resize Example

Use the Inside this div, you can include any content you'd like. Snippets, images, etc.

Copy

CSS for Resize Property

div.doct-resizeyourself
{
  resize: both;
  overflow: auto;
  border: solid 2px red;
  padding: 20px; 
  width: 300px;
}

References