Incluir en mis sitios favoritos
Ingresar Salir Inscribirme
Buscar Ayuda Contactar Ingresar Directorio Ultimos
Búsqueda avanzada
Preguntas frecuentes
BUSCAR EN: BLOGS FOTOS
 

Hola, Invitado
Ingresar  Inscribirme
En línea: 1071 visitantes

Alemania (2)
Argentina (52)
Belice (2)
Bolivia (11)
Brasil (7)
Canadá (1)
Chile (18)
Colombia (18)
Costa Rica (26)
Cuba (20)
Dominicana, República (17)
Ecuador (5)
El Salvador (18)
España (179)
Estados Unidos (12)
Francia (2)
Guatemala (12)
Honduras (3)
Israel (0)
Italia (2)
Jamaica (0)
México (46)
Nicaragua (3)
Países Bajos (0)
Panamá (14)
Paraguay (6)
Perú (21)
Puerto Rico (6)
Reino Unido (1)
Uruguay (9)
Venezuela (38)





Búsquedas recientes

Lo más popular

Lo más buscado este mes

Archivo Weblogs


DIRECTORIO WEBLOGS :: México > Tecnología Incluir BlogMéxico >  Tecnología Weblogs de Yaaqui.com DIRECTORIO WEBLOGS
Cgnauta Blog
creado con Blogger  en Mexico DF
ENVIAR A UN AMIGO
Para subscribirse a  requiere identificarte
Usuario: Ingresar

Blog de diseño gráfico, informática, tecnología y cultura política.
VisitarCGnauta Blog
Dirección URLhttp://cgnauta.blogspot.com/    Registrado:1202274300
Compartir:

Compartir en Facebook Compartir en Twitter Stumble It More...


Enviar a email
Visitar max-width: Evitar que los objetos desborden su elemento contenedor con CSS max-width: Evitar que los objetos desborden su elemento contenedor con CSS en General
Por matius
el 31-Dec-1969


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.


Leído 4 veces

Para Subscribirse a  requiere identificarse antes
max-width: Evitar que los objetos desborden su elemento contenedor con CSS en  Weblogs de Yaaqui.com  Mexico DF Blog de diseño gráfi

Fotologs
Cosplay de media noche: Galería variada, 7º parte

Foto 0 en  - Cosplay de media noche: Galería variada, 7º parte
Más fotos Cosplay de media noche: Galería variada, 7º parte + fotos




01-Mar-2012
El navegador Dolphin para Android ahora tiene reconocimiento de voz

Foto 0 en  - El navegador Dolphin para Android ahora tiene reconocimiento de voz
Más fotos El navegador Dolphin para Android ahora tiene reconocimiento de voz + fotos




01-Mar-2012
Ilustraciones de los vestuarios más legendarios de la música

Foto 0 en  - Ilustraciones de los vestuarios más legendarios de la música
Más fotos Ilustraciones de los vestuarios más legendarios de la música + fotos




01-Mar-2012

Cgnauta Blog Mexico DF

Blog de diseño gráfico, informática, tecnología y cultura política. CGnauta blog

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 na [..] Leer nota completa
Subscribirse a max-width: Evitar que los objetos desborden su elemento contenedor con CSS
Publicado 31-Dec-1969 por matius en General
Leído 4 veces. Más resultados en Más artículos max-width: Evitar que los objetos desborden su elemento contenedor con CSS Fotos acerca max-width: Evitar que los objetos desborden su elemento contenedor con CSS max-width: Evitar que los objetos desborden su elemento contenedor con CSS en Yaaqui
Guasabaraeditor Santo Domingo

SERVICIO DE NOTICIAS en favor de la democracia participativa, el desarrollo humano, la paz, el medio ambiente y la cultura.- OPINIÓN, NOTICIAS Y COMENTARIOS. Haciendo de la lucha contra la pobreza un apostolado templario GUASABARAeditor

Evitar que las pasiones se desborden
8 Septiembre 2010, 11:27 PM Evitar que las pasiones se desbordenSiempre resultará lamentable se produzcan debates fuera de controlEscrito por: TEÓFILO QUICO TABAR (mailto:%20tabasa1@hotmail.com) La política como otras actividades tiende a  desatar las pasiones y, cuando ocurre, puede obnubilar momentáneamente a los que con razón o sin ella se ven envueltos, llegando en ocasiones a situaciones [..] Leer nota completa
Subscribirse a max-width: Evitar que los objetos desborden su elemento contenedor con CSS
Publicado 31-Dec-1969 por GUASABARAeditor en General
Leído 7 veces. Más resultados en Más artículos Evitar que las pasiones se desborden Fotos acerca Evitar que las pasiones se desborden Evitar que las pasiones se desborden en Yaaqui
Guasabaraeditor Santo Domingo

SERVICIO DE NOTICIAS en favor de la democracia participativa, el desarrollo humano, la paz, el medio ambiente y la cultura.- OPINIÓN, NOTICIAS Y COMENTARIOS. Haciendo de la lucha contra la pobreza un apostolado templario GUASABARAeditor

Viviría usted dentro de un contenedor?
Veronica Smink - BBC Mundo, Cono Sur ¿Viviría usted dentro de un contenedor? Imagen del tipo de casas proyectadas por PrarX ¿Se imagina viviendo dentro de un contenedor de carga? Para muchos puede sonar a pesadilla, pero lo cierto es que hoy en día vivir en estos gigantes recipientes puede resultar un lujo.En los últimos años se ha desarrollado una nueva modalidad arquitectónica que consiste en [..] Leer nota completa
Subscribirse a max-width: Evitar que los objetos desborden su elemento contenedor con CSS
Publicado 31-Dec-1969 por GUASABARAeditor en General
Leído 2 veces. Más resultados en Más artículos Viviría usted dentro de un contenedor? Fotos acerca Viviría usted dentro de un contenedor? Viviría usted dentro de un contenedor? en Yaaqui
Rodolfo Pilas Blogueros

Weblog de Rodolfo Pilas con temas de tecnología, internet, utilidades. Originado en Uruguay Rodolfo Pilas Rio Pilas

Truecrypt contenedor de datos cifrados
Foto 0 en  - Truecrypt contenedor de datos cifrados Durante bastante tiempo fui usuario de EncFS para guardar mis datos personales cifrados y poderlos transportar. La verdad que EncFS funciona de maravillas con fuse y es muy práctico, aunque el resultado es un directorio con datos (cifrados) y a mi siempre me atrajo la idea de armar mi sistemas encriptados en un archivo (contenedor), [...] [..] Leer nota completa
Subscribirse a max-width: Evitar que los objetos desborden su elemento contenedor con CSS
Publicado 04-Sep-2008 por rodolfo en PersonalismoVideosRapidosbublehaventmetMichaelmusicMúsicaoficialrebeccavideoyetyou
Leído 26 veces. Más resultados en Más artículos Truecrypt contenedor de datos cifrados Fotos acerca Truecrypt contenedor de datos cifrados Truecrypt contenedor de datos cifrados en Yaaqui
Joup Santa Cruz /Bolivia

Un blog de una mujer llamada esperanza, politica, cuentos, poesias, libros, videos divertidos. Joup

Short film - Estoy en busca de un contenedor de cortos -
[..] Leer nota completa
Subscribirse a max-width: Evitar que los objetos desborden su elemento contenedor con CSS
Publicado 20-Mar-2008 por Joup en artistas
Leído 35 veces. Más resultados en Más artículos Short film - Estoy en busca de un contenedor de cortos - Fotos acerca Short film - Estoy en busca de un contenedor de cortos - Short film - Estoy en busca de un contenedor de cortos - en Yaaqui
Guasabaraeditor Santo Domingo

SERVICIO DE NOTICIAS en favor de la democracia participativa, el desarrollo humano, la paz, el medio ambiente y la cultura.- OPINIÓN, NOTICIAS Y COMENTARIOS. Haciendo de la lucha contra la pobreza un apostolado templario GUASABARAeditor

Nadie verificó contenedor llevó cocaína a España
El cargamento fue atribuido a Arturo Del Tiempo. Afirman que ningún oficial de Aduanas, DNCD, ni Agricultura revisó el cargamento 17 Junio 2010, 12:12 PM Nadie verificó contenedor llevó cocaína a España Escrito por: PEDRO CASTRO (p.castro@elnacional.com.do) El contenedor donde fueron  transportados los mil 221 kilos de cocaína decomisados en España en febrero,  no fue verificado por la Dirección [..] Leer nota completa
Subscribirse a max-width: Evitar que los objetos desborden su elemento contenedor con CSS
Publicado 17-Jun-2010 por GUASABARAeditor en General
Leído 8 veces. Más resultados en Más artículos Nadie verificó contenedor llevó cocaína a España Fotos acerca Nadie verificó contenedor llevó cocaína a España Nadie verificó contenedor llevó cocaína a España en Yaaqui
Resistencia Santiago De Leon De Caracas Caracas

Blog sobre temas de la política en Venezuela y la lucha estudiantil por la libertad, la democracia y los derechos civiles. Resistencia Santiago de Leon de Caracas

"Yo vivo feliz en mi bungalow contenedor, lo tengo limpiecito"
Foto 0 en  - "Yo vivo feliz en mi bungalow contenedor, lo tengo limpiecito" La basura sigue ahí (Cheo Pacheco) [..] Leer nota completa
Subscribirse a max-width: Evitar que los objetos desborden su elemento contenedor con CSS
Publicado 17-Apr-2009 por Resisten en General
Leído 11 veces. Más resultados en Más artículos "Yo vivo feliz en mi bungalow contenedor, lo tengo limpiecito" Fotos acerca "Yo vivo feliz en mi bungalow contenedor, lo tengo limpiecito" "Yo vivo feliz en mi bungalow contenedor, lo tengo limpiecito" en Yaaqui
Blogs De Guatemala Guatemala

Blogs de Guatemala | Directorio de Blogs, donde los guatemaltecos escriben. Noticias, información, clima, deportes, poesía, opinión, información Blogs de Guatemala Así se escribe en Guatemala. Directorio de Blogs Guatemaltecos

Octavo elemento
Son muchos los momentos de discusión para los integrantes de Octavo elemento, porque están en busca de un producto musical que verdaderamente se distinga en el escen [..] Leer nota completa
Subscribirse a max-width: Evitar que los objetos desborden su elemento contenedor con CSS
Publicado 30-May-2010 por Blogs de en General
Leído 9 veces. Más resultados en Más artículos Octavo elemento Fotos acerca Octavo elemento Octavo elemento en Yaaqui
Fogonazos Blogueros

Un Blog de ciencias de asombros diarios. Fogonazos

No es fácil ser un elemento
El mundo de la química es como un culebrón, una aventura de átomos que se atraen, se repelen o reaccionan violentamente entre sí. El vídeo forma parte de un programa de la Comisión Europea llamado Leer nota completa
Subscribirse a max-width: Evitar que los objetos desborden su elemento contenedor con CSS
Publicado 21-May-2008 por noreply@blogger.com (aberron) en artistas
Leído 22 veces. Más resultados en Más artículos No es fácil ser un elemento Fotos acerca No es fácil ser un elemento No es fácil ser un elemento en Yaaqui
Maestros Activos Blogueros

Bitácora académica producida por Fredeswinda Velez
Estoy casada y tengo 2 hermosas niñas. Poseó una Maestría en Artes de Educación en Enseñaza de Ciencias. Maestros Activos

Tarea: MI elemento quimico
Como lo prometido el deuda aqui las instrucciones del trabajo y el ejemplo de el libro sobre el elemento. Recuerden sean bien craetivos Piensen en los libros de los niños son con muchos colores, letras grandes, dibujos llamativos, oraciones cortas y que se entiendan. Leer nota completa
Subscribirse a max-width: Evitar que los objetos desborden su elemento contenedor con CSS
Publicado 19-Jan-2009 por noreply@blogger.com (Fredeswin en Gizmologia1 NovemberAndroidarranque dualBateriaDiscodual bootDudenEngadgetGerardoNvidiaPortátilPre
Leído 10 veces. Más resultados en Más artículos Tarea: MI elemento quimico Fotos acerca Tarea: MI elemento quimico Tarea: MI elemento quimico en Yaaqui
Blogs De Guatemala Guatemala

Blogs de Guatemala | Directorio de Blogs, donde los guatemaltecos escriben. Noticias, información, clima, deportes, poesía, opinión, información Blogs de Guatemala Así se escribe en Guatemala. Directorio de Blogs Guatemaltecos

Asesinan elemento del Ejército
Astrid Herrera Asesinan a elemento de Seguridad Ciudadana Byron Armando Colorado Xoná, de 21 años de edad, quien fue atacado por desconocidos en su aldea natal, Belejú, Chicamán, Quiché; recibiendo 28 heridas de arma blanca que le causaron la muerte, cuando se encontraba de descanso de fin de semana. Byron Colorado se encontraba [...] [..] Leer nota completa
Subscribirse a max-width: Evitar que los objetos desborden su elemento contenedor con CSS
Publicado 23-Sep-2008 por Blogs de en artistas
Leído 13 veces. Más resultados en Más artículos Asesinan elemento del Ejército Fotos acerca Asesinan elemento del Ejército Asesinan elemento del Ejército en Yaaqui
Blogs De Guatemala Guatemala

Blogs de Guatemala | Directorio de Blogs, donde los guatemaltecos escriben. Noticias, información, clima, deportes, poesía, opinión, información Blogs de Guatemala Así se escribe en Guatemala. Directorio de Blogs Guatemaltecos

Muere elemento del Ejército
Astrid Herrera Ramírez Falleció un elemento de Seguridad Ciudadana Gumercindo Gualip de 21 años, originario de San Lorenzo, Suchitepéquez, el cual perdió la vida el 05 de septiembre del presente año a las 13:00 horas en el cumplimiento de su deber a consecuencia de un impacto de bala, durante los disturbios provocados en la 6ª Calle [...] [..] Leer nota completa
Subscribirse a max-width: Evitar que los objetos desborden su elemento contenedor con CSS
Publicado 08-Sep-2008 por Blogs de en artistas
Leído 14 veces. Más resultados en Más artículos Muere elemento del Ejército Fotos acerca Muere elemento del Ejército Muere elemento del Ejército en Yaaqui

Advertencia YAAQUI.COM no verifica la veracidad de la información publicada y no se responsabiliza por el uso que se le de a la infomación del contenido publicado en los feeds y weblogs independientes. Las opiniones vertidas en este sitio no necesariamente son nuestras. Nos reservamos el derecho de remover cualqueir material que consideremos inconveniente.



Una guacamaya roja

Guacamaya
Imagen de la exposición de la Calle de San Sebastián, Puerto Rico

Exposición callejera de arte
Imagen de Angelina como Lara Croft

Lara Croft
Clasificados Costa Rica Clasificados Argentina Clasificados de España Clasificados Puerto Rico Envía una Postal