max-width

Overview

W3C

Properties

background

background-attachment

The max-width property constrains the width of an element to a maximum range.

CSS2


                                max-width: <length> | <percentage> | none | inherit

Initial:	none
Applies To:	all elements but non-replaced inline elements, table rows, and row groups
Inherited:	no
Percentages:	refer to width of containing block
Media:	visual

Note: Doctype is required for Internet Explorer 8+

Values
DOM
Example | Values | length
Example | Values | none
Example | Values | percentage
Example | DOM
Reference


                                max-width: value;


Value:	Description:
inherit	Takes the same computed value as the property for the element's parent
length	Fixed maximum width
none	No width limit
percentage	Width percentage calculated with respect to the width of the containing block


                                [window.]document.getElementById("element-id").style.maxWidth = "max-width";

<!doctype html>
<html>
  <head>
    <title>max-width</title>
  </head>
  <body>
    <a href="/" onmouseover="mouseover1();">length</a>
    <a href="/" onmouseover="mouseover2();">percentage</a>
    <a href="/" onmouseover="mouseover3();">none</a><br>
    <img alt="Happy Face" id="id1" src="/assets/jpg/HappyFace.jpg">
    <img alt="Happy Face" id="id2" src="/assets/jpg/HappyFace.jpg">
    <img alt="Happy Face" id="id3" src="/assets/jpg/HappyFace.jpg">
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.maxWidth = "160px";
      document.getElementById("id2").style.maxWidth = "160px";
      document.getElementById("id3").style.maxWidth = "160px";
    }
    function mouseover2() {
      document.getElementById("id1").style.maxWidth = "10%";
      document.getElementById("id2").style.maxWidth = "10%";
      document.getElementById("id3").style.maxWidth = "10%";
    }
    function mouseover3() {
      document.getElementById("id1").style.maxWidth = "none";
      document.getElementById("id2").style.maxWidth = "none";
      document.getElementById("id3").style.maxWidth = "none";
    }
    document.getElementById("id1").style.width = "80px";
    document.getElementById("id2").style.width = "160px";
    document.getElementById("id3").style.width = "320px";
  </script>
</html>

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

Values

DOM

Example | Values | length

Example | Values | none

Example | Values | percentage

Example | DOM

Reference