Note that max-width and width shouldn’t be applied to the same element using the same unit, as one will override the other. If, for example, the width is set to 150px and the max-width is set to 60px, the actual width of the element will be 60px, and the width declaration will become redundant.

The following style rule shows how conflicts are resolved where an element has been given both a width and a max-width using the same unit (pixels in this case):

.example {
  max-width: 60px;
  width: 150px;
}

In the above example, the width of the element will be fixed at 60px.

However, it’s acceptable to set max-width and width when the values are different units (although it may not be entirely useful, there are a few cases where it can be used to good effect).

This style rule assigns a max-width of 160px to images with the class "example", and also assigns a width of 50%:

img.example {
  width: 50%;
  max-width: 160px;
  height: auto;
}

The final width of the image in the above example will be the smallest value.

If you want an image to scale when the page width is small, so that the image doesn’t break out of its column, you could use the above example to ensure that the image’s size decreases once the available space is less than 160 pixels.

If the available space is greater than 160 pixels, the image will expand until it’s 160 pixels wide—but no further. This ensures that the image stays at a sensible size—or its correct aspect ratio—when space allows.

The min-width property can be used for the reverse of this scenario.