 |
Usuario: Ingresar |
Blog de diseño gráfico, informática, tecnología y cultura política.
 |
| Dirección URL | http://cgnauta.blogspot.com/ Registrado:1202274300 |
Compartir:
|
|
 Enviar a email | 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
|
|
 |
 | 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 | | Publicado 31-Dec-1969 por GUASABARAeditor en General
Leído 7 veces. Más resultados en    |
|
| 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 | | Publicado 31-Dec-1969 por GUASABARAeditor en General
Leído 2 veces. Más resultados en |
|
| 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 |  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 | | Publicado 04-Sep-2008 por rodolfo en PersonalismoVideosRapidosbublehaventmetMichaelmusicMúsicaoficialrebeccavideoyetyou
Leído 26 veces. Más resultados en |
|
| Joup | Santa Cruz /Bolivia | Un blog de una mujer llamada esperanza, politica, cuentos, poesias, libros, videos divertidos. Joup |
| 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 | | Publicado 17-Jun-2010 por GUASABARAeditor en General
Leído 8 veces. Más resultados en |
|
| 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 | | Publicado 30-May-2010 por Blogs de en General
Leído 9 veces. Más resultados en |
|
| 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 | | Publicado 21-May-2008 por noreply@blogger.com (aberron) en artistas
Leído 22 veces. Más resultados en |
|
| 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 | | Publicado 19-Jan-2009 por noreply@blogger.com (Fredeswin en Gizmologia1 NovemberAndroidarranque dualBateriaDiscodual bootDudenEngadgetGerardoNvidiaPortátilPre
Leído 10 veces. Más resultados en |
|
| 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 | | Publicado 23-Sep-2008 por Blogs de en artistas
Leído 13 veces. Más resultados en |
|
| 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 | | Publicado 08-Sep-2008 por Blogs de en artistas
Leído 14 veces. Más resultados en |
|
|
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.
|
|
| |
Hola, Invitado
En línea: 1071 visitantes
+ fotos
La basura sigue ahí (Cheo Pacheco) [..] 
