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 son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

4 comentarios:

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

    ResponderEliminar
  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ó.

    ResponderEliminar
  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

    ResponderEliminar

Samurai Jack (2017), episodio 10 "Final"

Samurai Jack (2017)Jack se enfrenta por fin con Aku, todos tratan de ayudar al samurai y la sorpresa vendrá del pasado.

[Leer artículo...]

Noragami entra en paro indefinido

Noragami es suspendida temporalmenteUna de las autoras no puede continuar con su trabajo al frente del manga y se ha decidido meter la historia en hiatus, lo que puede significar...

[Leer artículo...]

Tales of Zestiria y su final Yuri

El final de Tales the Zestiria The XLas aventuras de Sorey llega a su fin con un final de lo más raro que he visto hasta ahora.

[Leer artículo...]

Warau Salesman New (2017) El vendedor sonriente

Warau Salesman New (2017) EstrenosSatoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[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.

Anexos

Bitacoras.com