max-width: Evitar que los objetos desborden su elemento contenedor con CSS

max-width es una propiedad CSS bastante útil, aunque no totalmente soportada por todos los navegadores, establece un valor máximo del ancho, para que un elemento determinado no lo sobrepase, como una imagen, un div, tabla, párrafo, etcétera. Es un propiedad que se puede aprovechar en Foros donde se suben imágenes o contenido que sobrepasa el tamaño de su contenedor

Para el caso inverso se usa min-width que define el tamaño mínimo que un elemento puede tener.

La forma de usarlo, imaginemos un div que contiene una imagen, el div establece un valor de ancho de 200px y un padding de 10px, mientras que la imagen dentro del div mide 256px de ancho, el codigo sería parecido al siguiente

<div style="width:200px; padding:10px;"><img src="imagen.jpg"/></div> 

El resultado es que la imagen se desborda del DIV, porque este mide menos:

Por tanto es evidente que si necesitamos que la imagen no rompa el diseño del contenedor sobrepasándolo, podríamos darle un valor a la imagen en width, pero si tenemos muchas imágenes en ese div y digamos, usamos width aplicado a la etiqueta general IMG en el código CSS, todas las imágenes se ajustaran a ese tamaño y eso en muchos casos significaría deformar la imagen o que imagen que deben ser pequeñas, sean enormes.

max-width en cambio, respeta el tamaño de la imagen mientras no sobrepase el contenedor al que se le agrega la propiedad.

Para el mismo caso usaremos el mismo código pero agregándole max-width con un valor de 200px, pues recordemos que agregamos el padding de 10px:

<div style="width:200px; padding:10px;"><img style="max-width:200px;" src="imagen.jpg"/></div>

El resultado:

Notarán que max-width lo aplicamos al elemento contenido, no al contenedor, si queremos aprovecharnos de las ventajas de CSS deberíamos crear una regla para las imágenes del contenedor:

#contenedor img {max-width:200px;}

Así pues esta regla que creamos dice que a toda imagen dentro del div con el id "contenedor", no se superará el valor de 200px, cualquier elemento que lo haga es redimensionado sobrescribiendo su valor width.

Se aplicaría a nuestro código como una ID:

<div id="contenedor" style="width:200px; padding:10px;"><img src="imagen.jpg"/></div>  

Si fueran imágenes, los párrafos y otras etiquetas al mismo tiempo, debemos agregar el ID y el nombre de la etiqueta (img, obj, p, div, etcétera) por cada etiqueta, repitiendo la instrucción que separamos con una coma.
Siendo muy conscientes de que no debe haber ninguna coma que colinde con el paréntesis llave de apertura "{" o no servirá toda la regla, ejemplo:

#contenedor img, #contenedor p, #contenedor obj
{max-width:200px;}

Si una imagen es más pequeña de 200px no se deformará como podemos ver con la imagen inferior que mide 50px:

Este es el primer tutorial en varios días, luego de una semana enfermo, que se le va a hacer, si tiene errores o no entendieron, los comentarios son todos suyos.