¿Como Configurar Automaticamente El tamaño De Una Imagen?

mhshen86 · #1 (**permalink**) 19/05/2012, 18:02

Bueno Esque tengo un pequeño problema, Necesito un html o CSS para ajustar automáticamente el tamaño de una imagen Exactamente es esto:

width: 85px; height: 180px;
background-image: url(/c_images/stickers/mundito.gif);

Como pueden ver da un tamaño y lo que necesito es no dar un tamaño sino que el tamaño se acomode automáticamente a la imagen, Osea al colocar la imagen la imagen salga completa con el tamaño exacto de la imagen sin necesitar ese código :D Espero un Respuesta

ArturoGallegos · #2 (**permalink**) 19/05/2012, 18:26

mi no entender, cuando colocas una imagen de background nunca se necesita especificar el tamaño... de verdad que no entiendo tu logica si no quieres especificarlo no lo hagas y punto... al final de cuentas la imagen no se ve afectada por esos valores.

SeoPosicWeb · #3 (**permalink**) 22/05/2012, 00:38

No es muy claro lo que quieres o cual es tu problema. Pero si entendi bien, es que la imagen salga con el tamaño original, sin que sea afectada por el codigo. Si es asi, unicamente borra el codigo que le asigna proporciones, quedando solamente asi: background-image: url(/c_images/stickers/mundito.gif);

En caso de que no, replantea tu duda de una manera mas clara para ver si podemos ayudar.

Esperamos haber ayudado.

kseso? · #4 (**permalink**) 22/05/2012, 09:11

Imágenes colocadas en el html vía el tag <img src="..." /> pueden modificarse con Css o con los atributos width="XXX" y/o height="XXX"

Imágenes colocadas como fondos (backgrounds) de los elementos en el css pueden modificarse ahora ya con las nuevas propiedades propuestas en el documento "CSS Backgrounds and Borders Module Level 3" del W3c.

ArturoGallegos · #5 (**permalink**) 22/05/2012, 09:48

cierto señor Kseso? con css3 se puede lograr, pero... conoce algun hack para que funcione en IE7 e IE8

he de admitir que es una gran ventaja que IE9 lo soporte pero aun no podemos dejar de lado a IE7 e IE8, los metodos de hack que he visto no me han convencido como para utilizar esta propiedad CSS

kseso? · #6 (**permalink**) 22/05/2012, 10:02

Como diría Furoya, dicho por mi: a tema abandonado, tema parasitado. A divagar.

Cita:

Iniciado por Ag666

...para que funcione en IE7 e IE8..

No se si esos scripts que añaden soporte en los ie también incluirán estas propiedades.

Pero como el consultante desaparecido fue tan conciso en las explicaciones (tan contradictorias y vacías de referentes), sólo apuntaba dos cuestiones básicas: vías de incluir imágenes y qué se puede utilizar en función de la vía elegida.

Porque yo no saqué nada en claro del galimatías inicial:

Cita:

Bueno Esque tengo un pequeño problema, Necesito un html o CSS para ajustar automáticamente el tamaño de una imagen Exactamente es esto:

width: 85px; height: 180px;
background-image: url(/c_images/stickers/mundito.gif);

Como pueden ver da un tamaño y lo que necesito es no dar un tamaño sino que el tamaño se acomode automáticamente a la imagen, Osea al colocar la imagen la imagen salga completa con el tamaño exacto de la imagen sin necesitar ese código :D Espero un Respuesta

Sinceramente, me recordó un monólogo de Gila o de Cantinflas.

Toca esperar que nos despejen dudas.

Por cierto: si la imagen es meramente ornamental, vía css y es que se recorte, se o no es secundario.
Si es parte de la información, vía src.

furoya · #7 (**permalink**) 23/05/2012, 21:51

Hola chicos.

Veo que ya me citan hasta en los temas en que no estoy.
Bueno, ya me llamaron, ahora me van a tener que aguantar.

Antes de desvirtuar absolutamente le tema, vamos con el asunto original ... sea cual fuere. O cual adivinemos.

Por respeto a quien llegue a este post buscando alguna solución esperanzado por el título, y para darle el gusto al compañero Ag666 (no sé por qué te imagino una bestia plateada), ésta sería la interpretacion de ajustar el fondo a la caja.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>FONDO ESCALADO.</title>
<style type="text/css">
body {background-color: black; color: white; }
#ej1 {width: 316px; height: 343px; background-size: 100% 100%; margin: auto; color: navy; text-align: right; font: bold 12px/120% sans-serif; 

filter:progid:dximagetransform.microsoft.alphaimageloader( enabled:"true", src= "http://img502.imageshack.us/img502/470/albertocontrerasregreso.jpg", sizingmethod="scale" ); 

background-image: url( http://img502.imageshack.us/img502/470/albertocontrerasregreso.jpg ); }
</style>
</head>
<body>
<h2>Imagen de fondo escalada al tamaño del contenedor.</h2>
<strong>En IE usa filtro.</strong>
<div id=ej1>Alberto Contreras&nbsp;</div>
</body>
</html>

La otra interpretación es que un div (por ejemplo) se ajuste al tamaño de la imagen que contiene

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>CAJA ESCALADA.</title>
<style type="text/css">
body {background-color: black; color: white; }
#ej2 {background-color: yellow; border: 1px solid red; float: left; position: relative; 
font-size: 1px}

#texto {position: absolute; right: 0; top: 0; color: blue; font: bold 12px/120% sans-serif; }
</style>
</head>
<body>
<h2><code>div</code> ajustado al tamaño de imagen.</h2>

<div id=ej2><span id=texto>Alberto Contreras. </span>
<img src=http://img502.imageshack.us/img502/470/albertocontrerasregreso.jpg >
</div>
</body>
</html>

Otra, que no voy a mostrar aquí, porque sería javascript, es poner una imagen de fondo a un (y repetimos el ejemplo) div, y que éste se redimensione hasta alcanzar las medidas originales de la imagen.

Cabe aclarar que en el primer caso, si el contenedor no tiene una medida proporcional a la de la imagen, se va a ver deformada. Pero completa, no se va a cortar.
Con respecto al segundo, hay alguna otra manera de hacerlo; yo elegí ésa.

Bien. Vamos a lo importante; y me alegra que estés por aquí, Ag666.

Pregunta : ¿a nadie le hace un poco de ruido que venga alguien nuevo a preguntar una incoherencia que mezcla propiedades como alto y ancho para elementos, con las de una imagen de fondo? ¿Y que además escriba de manera harto confusa?.
(Dicho sea de paso, SeoPosicWeb, lo tuyo no mejora las cosas.)
¿Alguien piensa que una persona que no sabe lo más elemental de CSS puede venir a preguntar ... para qué? Si está creando su página web, ya debería saber que está haciendo un menjunje de propiedades; y si no lo sabe, no está capacitado para hacer una página web. Y no la está haciendo, o preguntaría otras mil cosas primero.

Comento esto porque soy un conpiranóico que he notado una gran cantidad de mensajes preguntando estupideces y/o gruesas incoherencias esperando que uno (o mejor varios) de nosotros pida aclaraciones, o más aún, que "adivine" y ponga un ejemplo con su mejor buena voluntad, para después hacer una objeción y replantear todo distinto ... esperando que le dejemos otro ejemplo con la nueva "adivinación".

Ni hablar de los que se suman respondiendo burradas mayúsculas, obligándonos a aclarar (siempre pensando en la gente que viene a aprender y no a molestar) que las cosas son distintas, y tratando de evitar así la bola de nieve que genera una estupidez repetida por los que se prenden en cualquiera y defienden esa posición hasta la hoguera.

Pero esto ya sería otro tema. Estoy desvirtuando, pero tampoco quiero abusarme.

NSD · #8 (**permalink**) 24/05/2012, 10:41

por lo que entendi quieres que el div tome el tamaño de la imagen de fondo que le aplicas, con css tradicional no se puede eso.
podrias usar javascript claro pero ese es otro tema.
estoy empezando a leer y a aprender css3 (me sorprende las maravillas que trae simplificadas)
y si llego a dar con alguna propiedad que haga esto te lo are saber sin embargo como es tu problema y no el mio te sugeriria que tambien investigues por tu cuenta.

Código HTML:

Ver original<div style="background:url(images/back.png) no-repeat; background-size:100%;"></div>

eso es hasta donde puedo orientarte con el clasico css, tienes una imagen de fondo que se ve completa en tu div pero para que no se desforme tendria que mantener la relacion de aspecto.
por cierto coincido con los comentarios anteriores tendrias que explicar un poco mejor tu problema. saludos

furoya · #9 (**permalink**) 24/05/2012, 15:59

Hola NSD.
En mi lista también podría agregar a los que leen el tema y repiten lo mismo que ya fue explicado hasta con los mismos ejemplos, pero que ya no están tan completos como los originales.
¿De veras estás esperando que mhshen86 reaparezca? ¿Para qué?.

kseso? · #10 (**permalink**) 24/05/2012, 16:59

Cita:

Iniciado por furoya

Pregunta : ¿a nadie le hace un poco de ruido que venga alguien nuevo a preguntar una incoherencia que mezcla propiedades como alto y ancho para elementos, con las de una imagen de fondo? ¿Y que además escriba de manera harto confusa?.
(Dicho sea de paso, SeoPosicWeb, lo tuyo no mejora las cosas.)
¿Alguien piensa que una persona que no sabe lo más elemental de CSS puede venir a preguntar ... para qué? Si está creando su página web, ya debería saber que está haciendo un menjunje de propiedades; y si no lo sabe, no está capacitado para hacer una página web. Y no la está haciendo, o preguntaría otras mil cosas primero.

Comento esto porque soy un conpiranóico que he notado una gran cantidad de mensajes preguntando estupideces y/o gruesas incoherencias esperando que uno (o mejor varios) de nosotros pida aclaraciones, o más aún, que "adivine" y ponga un ejemplo con su mejor buena voluntad, para después hacer una objeción y replantear todo distinto ... esperando que le dejemos otro ejemplo con la nueva "adivinación".

Ni hablar de los que se suman respondiendo burradas mayúsculas, obligándonos a aclarar (siempre pensando en la gente que viene a aprender y no a molestar) que las cosas son distintas, y tratando de evitar así la bola de nieve que genera una estupidez repetida por los que se prenden en cualquiera y defienden esa posición hasta la hoguera.

Pero esto ya sería otro tema. Estoy desvirtuando, pero tampoco quiero abusarme.

Ramén, Ramén!!!

Cita:

Iniciado por furoya

Hola NSD.
En mi lista también podría agregar a los que leen el tema y repiten lo mismo que ya fue explicado hasta con los mismos ejemplos, pero que ya no están tan completos como los originales.
¿De veras estás esperando que mhshen86 reaparezca? ¿Para qué?.

Ramén, Ramén, Ramén!!!

Las citas para recalcar y que quede constancia y por si algún desubicado, paraca o espécimen de los que tanto abundan últimamente (con el beneplácito y permisividad de todos) se las saltó o tiene tentaciones de venir con réplicas acordes a su naturaleza, del tipo 'Prepotencia, falta de modales, irrespetuoso'.

Los Ramén para que Furoya no se sienta sólo en la batalla (que ya sabes que está perdida).

NSD · #11 (**permalink**) 24/05/2012, 17:46

Cita:

Iniciado por furoya

Hola NSD.
En mi lista también podría agregar a los que leen el tema y repiten lo mismo que ya fue explicado hasta con los mismos ejemplos, pero que ya no están tan completos como los originales.
¿De veras estás esperando que mhshen86 reaparezca? ¿Para qué?.

Furoya esta bien eres el mejor.
quieres que te de un titulo o que?

usaste muchas lineas para explicar un concepto que por el nivel del que pregunto no creo que llegue a comprenderlas solo resumi en una linea la idea para que pueda implementarla y salir del paso.

la idea del foro (hasta donde tengo entendido) es ayudar mutuamente y colaborar en lo posible quien lea esto vera tu ejemplo el mio y sabra que el tuyo es mas completo.

no gasto mas tiempo. y en tu lista porque no incluyes a los idiotas sin vida que se hacen los malos en un foro de aprendisaje criticando a los demas miembros en vez de haceptar la realidad e irse si no les gusta? creo que eso tambien deberias agregarlo
saludos.

furoya · #12 (**permalink**) 24/05/2012, 18:47

Cita:

Iniciado por NSD

Furoya esta bien eres el mejor.

Gracias, pero no exageres, sólo soy mejor que tú.

Cita:

Iniciado por NSD

la idea del foro (hasta donde tengo entendido) es ayudar mutuamente y colaborar en lo posible quien lea esto vera tu ejemplo el mio y sabra que el tuyo es mas completo.

No, sólo sabrá que el tuyo está de más. Y empieza a colaborar, no a arruinar temas, que para eso están los foros.

Cita:

Iniciado por NSD

y en tu lista porque no incluyes a los idiotas sin vida que se hacen los malos en un foro de aprendisaje criticando a los demas miembros en vez de haceptar la realidad e irse si no les gusta?

No proyectes, NSD. Y no es mala la idea de que te vayas, aunque yo preferiría que aprendieses a comportarte en un foro y te quedaras; no eres precisamente del grupete al que no queremos por aquí.

Eso sí, por favor, si te vas a quedar : ABRE UN DICCIONARIO UNA VEZ EN TU VIDAAAAA

NSD · #13 (**permalink**) 24/05/2012, 20:07

Cita:

No, sólo sabrá que el tuyo está de más. Y empieza a colaborar, no a arruinar temas, que para eso están los foros.

posiblemente para gente arrogante mejor que yo les paresca asi.
y tambien puede que para novatos inexpertos les paresca mas simple.
depende de quien lo mire.

Cita:

No proyectes, NSD. Y no es mala la idea de que te vayas

gracias por el consejo lo tendre en cuenta. si algun colaborador me lo pide me ire boluntariamente, estoy aqui poruqe quiero aprender y ayudar en lo posible a los que saben menos que yo. y con respecto a comportarse...

Cita:

Pregunta : ¿a nadie le hace un poco de ruido que venga alguien nuevo a preguntar una incoherencia que mezcla propiedades como alto y ancho para elementos, con las de una imagen de fondo? ¿Y que además escriba de manera harto confusa?.
(Dicho sea de paso, SeoPosicWeb, lo tuyo no mejora las cosas.)
¿Alguien piensa que una persona que no sabe lo más elemental de CSS puede venir a preguntar ... para qué? Si está creando su página web, ya debería saber que está haciendo un menjunje de propiedades; y si no lo sabe, no está capacitado para hacer una página web. Y no la está haciendo, o preguntaría otras mil cosas primero.

Comento esto porque soy un conpiranóico que he notado una gran cantidad de mensajes preguntando estupideces y/o gruesas incoherencias esperando que uno (o mejor varios) de nosotros pida aclaraciones, o más aún, que "adivine" y ponga un ejemplo con su mejor buena voluntad, para después hacer una objeción y replantear todo distinto ... esperando que le dejemos otro ejemplo con la nueva "adivinación".

Ni hablar de los que se suman respondiendo burradas mayúsculas, obligándonos a aclarar (siempre pensando en la gente que viene a aprender y no a molestar) que las cosas son distintas, y tratando de evitar así la bola de nieve que genera una estupidez repetida por los que se prenden en cualquiera y defienden esa posición hasta la hoguera.

Pero esto ya sería otro tema. Estoy desvirtuando, pero tampoco quiero abusarme.

me parece que no fui yo quien estropeo esta vez el tema :riendo:

Cita:

Eso sí, por favor, si te vas a quedar : ABRE UN DICCIONARIO UNA VEZ EN TU VIDAAAAA

una buena critica admito que soy un hoygan. en esto no tengo nada que objetar.