lunes, 25 de octubre de 2010

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.

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

4 comentarios:

  1. hola amigo... el problema es que no anda en IE ... lo acabo de probas... gracias igual...

    ResponderBorrar
  2. Por favor verifica el soporta de una propiedad CSS en la W3C.

    Solo las versiones antiguas de IE no soportan max-width. Pero si ves este artículo en IE8 o IE9 funciona perfectamente.

    Como sea, ya no es una preocupación actualmente IE7 e IE6. Creo que te debes enfocar en navegadores que soporten CSS3 y HTML5 no en navegadores obsoletos, porque esa era y tendencia de optimización orientada ya terminó.

    ResponderBorrar
  3. Buena explicación.

    Y permíteme añadir: día a día el tema de compatibilidad con navegadores nos va preocupando menos a los que disfrutamos con el diseño web porque, se puede decir que, el que no tiene una versión actual de IE, es porque no quiere.
    Yo además sugiero a todo el mundo que se pase a un navegador que soporte mejor los estándares HTML/XHTML y CSS. Cualquiera de ellos: Firefox, Chrome, Opera... A ver si así, los responsables de IE se dan cuenta de que el pastel ya no es todo suyo.
    Saludos.

    Manu

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.