CSS - max-width

Description

The max-width property is used to set an upper bound on the width of an element.

Possible Values

length − Any length unit. The element can never have a value for width which exceeds this distance.
percentage − Limits the element's width to be at most this percentage of the width of the containing block.
none − There is no limit to the width of the element.

Applies to

All the HTML elements except non-replaced inline elements and table elements.

DOM Syntax

object.style.maxWidth = "50px"

Example

Here is the example −

<html>
   <head>
   </head>
   <body>
      <p style="max-width:100px; height:200px; border:1px solid red; padding:5px; margin:10px;">
      This paragraph is 200px high and max width is 100px
      This paragraph is 200px high and max width is 100px
      This paragraph is 200px high and max width is 100px
      This paragraph is 200px high and max width is 100px
      This paragraph is 200px high and max width is 100px
      </p>
      
      <img alt="logo" src="/images/css.gif" width="95" height="84" />
   </body>
</html>

This will produce following result −

This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px This paragraph is 200px high and max width is 100px

PDF