como puedo hacer para que una imagen sea igual de ancha que un div

tripoli · #1 (**permalink**) 29/12/2011, 18:37

Hola si tengo un div o una tabla dentro de este div o tabla quiero darle un ancho fijo y centrarlo como puedo hacerlo, saludos.

ZoroRoronoa · #2 (**permalink**) 29/12/2011, 19:08

Te dejo un ejemplo:

Código HTML:

Ver original<html>
<head>
<style>
#caja {width:300px; height:300px;}
#image {width:100%; height:100%;}
</style>
</head>
<body>
<div id="caja">
    <img src="zoro.jpg" alt="zoro" id="image" />
</div>
</body>
</html>

PD: la image que use para hacer el demo mide como 1200px por 900px
Con esto, independientemente el tamaño de la image, se ajusta al tamaño del div (:

Saludos.

tripoli · #3 (**permalink**) 30/12/2011, 06:41

Hola ZoroRoronoa, gracias por tu ayuda eso es lo que queria, aunque tengo otra duda, si tengo contenido y quiero que todo este en una capa div pero esta capa quede centrada en la pantalla por arriba y por abajo, se agradece si puedes ayudarme si no gracias de todas forma, saludos

ZoroRoronoa · #4 (**permalink**) 30/12/2011, 15:00

Usa posicion absoluta, colocale unas coordenadas a mita del navegador (es decir 50%)
Despues para centrar el "div" le damos un margin negativo con la mitad de sus dimensiones (la mitad de ancho y alto.
Ejemplo:

Código CSS:

Ver original#caja {
width:300px;
height:300px;
position:absolute;
top:50%;
left:50%;
margin-top:-150px; //la mitad de height
margin-left:-150px; //la mitad de width
}

Saludos.

PD: Si la altura es auto (no sabes cuanto será, es decir, se ajusta al contenido), creo que lo único con lo que se podría (que yo podría, mejor dicho), sería con javascript. con CSS no puedo, al menos que defina la altura.

Ojala y un argonauta del CSS nos pueda ayudar en este caso

kseso? · #5 (**permalink**) 30/12/2011, 15:59

Cita:

Iniciado por ZoroRoronoa

PD: Si la altura es auto (no sabes cuanto será, es decir, se ajusta al contenido), creo que lo único con lo que se podría (que yo podría, mejor dicho), sería con javascript. con CSS no puedo, al menos que defina la altura.

Ojala y un argonauta del CSS nos pueda ayudar en este caso

Ya sabe cuanto me gusta llevar la contraria al "creo que lo único con lo que se podría" (es broma). Mira a ver si esto es lo que buscas:
http://www.forosdelweb.com/f53/acomo...1/#post4080921
Triple centrado.

Y una pequeña matización a tu código inicial:

Código CSS:

Ver original#caja {width:300px; height:300px;}
#image {width:100%; height:100%;}

Si define los dos tamaños (ancho y alto) en la imagen, se distorsionará (perderá la proporción w*h)
Se evita con definir sólo uno y para que no haya desbordes de su contenedor, añadir a éste un overflow

ZoroRoronoa · #6 (**permalink**) 30/12/2011, 16:23

Por eso especifiqué entre paréntesis, que yo podría, me retracte de afirmas que era lo único con lo que se podía.

Y desde luego, gracias Kseso?, por la matización.

kseso? · #7 (**permalink**) 30/12/2011, 16:37

Cita:

Iniciado por ZoroRoronoa

Por eso especifiqué entre paréntesis, que yo podría, me retracte de afirmas que era lo único con lo que se podía. <-- Por eso puse entre paréntesis lo de "es broma"

Y desde luego, gracias Kseso?, por la matización.

Ya me dirá cómo ve el tripe centrado una vez que juegue un rato con él.

tripoli · #8 (**permalink**) 31/12/2011, 04:23

Hola ZoroRoronoa, gracias por tu colaboracion y kseso? gracias por tu enlace me has resuelto mis dudas, saludos.