No consigo que height 100% adapte una imagen a la altura de su contenedor

[cibermanu]

Hola compañeros.

Este es mi primer post. Llevo mucho tiempo resolviendo mis dudas con vosotros, pero nunca había tenido que entrar a preguntar algo que no me salía. Es por eso que he acabado registrandome en la comunidad. Así que ante todo, encantado de conoceos y estar aquí con vosotros.

El caso es:
Estoy haciendo una web para mi pareja. Quiere montar una especie de tienda donde vender sus cosillas. Vamos al grano:

En la página principal: http://www.myniyo.es/index.php tenemos tres contenedores por página donde se muestran tres productos distintos. Ahora mismo la web está en proceso de construcción, así que disculpad los errores (se admiten sugerencias). Llega un momento en el que mediante javascript precargo las imágenes para mostrarlas en los contenedores, y mediante una fórmula matemática calculo si tengo que ampliar al 100% la altura o la anchura de la imagen para que esta ocupe el máximo espacio posible de su contenedor sin salirse de él. Hasta ahí bien. El caso es que si calculo que lo que tengo que ampliar es la altura al 100%, me lo amplia al 100% de la altura original de la imagen, no al 100% de la altura de su contenedor, resultando que me descuadra la web por completo. Ahora mismo tengo subida una imagen de ejemplo de doraemon que al ampliarla me descuadra por completo.

Sé que es un tema un poco complejo de ponerse a mirar, pero si alguien le apetece le estaría muy agradecido, pues llevo horas y horas, y no soy capaz de dar con el motivo, aunque seguro que es más facil de lo que me parece a mi.

Bueno, gracias gente, y un saludo.
Seguimos viendonos por aquí.

[cibermanu]

Por cierto, aconsejo usar chrome, safari o incluso firefox para ver la web, ya que tiene canvas y no sé si internet explorer funcionará.

EDITO:
Me gustaría añadir que es necesario tener un diseño web basado en porcentajes en la medida de lo posible, para que sea lo más líquido posible y se adapte a cuantas más pantallas mejor

[tunait]

Hola cibermanu,

prueba a asignarle al contenedor de la imagen un posicionamiento de tipo relative ;)

[cibermanu]

Iniciado por tunait

Hola cibermanu,

prueba a asignarle al contenedor de la imagen un posicionamiento de tipo relative ;)

Gracias Tunait.
Voy a probarlo ahora, aunque tengo pocas esperanzas de arreglarlo después de haber pasado horas y horas buscando el error.

El caso es: un div no tiene por defecto posicionamiento relativo?
Ahora te comento si funcionó.

[cibermanu]

Iniciado por tunait

Hola cibermanu,

prueba a asignarle al contenedor de la imagen un posicionamiento de tipo relative ;)

Gracias Tunait, pero sigue fallando igual.

EDITO:
Añado algo de información. Es más, al poner el contenedor de la imagen a position:relative, ahora me oculta la flecha canvas de la derecha, el botón y el texto que antes se veía por encima de la imagen. Ahora estos quedan por debajo de la imagen y no se ven.

[tunait]

Iniciado por cibermanu

El caso es: un div no tiene por defecto posicionamiento relativo?

No, por defecto tiene static

Iniciado por cibermanu

Gracias Tunait, pero sigue fallando igual.

EDITO:
Añado algo de información. Es más, al poner el contenedor de la imagen a position:relative, ahora me oculta la flecha canvas de la derecha, el botón y el texto que antes se veía por encima de la imagen. Ahora estos quedan por debajo de la imagen y no se ven.

Bueno, según y como tuvieras definidos esos elementos puede ser normal que se comporten de forma distinta al cambiar el posicionamiento del contenedor padre.

¿cómo le estás asignando las dimensiones a la foto? dices que haces un cálculo con javascript?

[cibermanu]

Iniciado por tunait

No, por defecto tiene static


Bueno, según y como tuvieras definidos esos elementos puede ser normal que se comporten de forma distinta al cambiar el posicionamiento del contenedor padre.

¿cómo le estás asignando las dimensiones a la foto? dices que haces un cálculo con javascript?

Una pregunta: q diferencia hay entre static y relative?

Las dimensiones a la foto se calculan de la siguiente manera:

Se calcula (no se asgina) q anchura tendría la foto si se le asigna un 100% de la altura del contenedor. Si la anchura resultante (de la foto) es mayor que la anchura del contenedor, se asigna la anchura al 100% (la altura ya no debe sobrepasar a la del contenedor). Si no es mayor, se asigna la altura al 100%. Pero coge el 100% de la altura de la imagen, no la del contenedor, y no sé porque. La manera como cambio la altura de la imagen (o la anchura que para el caso es lo mismo), es desde javascript con .style.height = "100%";

Gracias por tu respuesta Tunait.

[cibermanu]

Por si alguien piensa que la imagen realmente se está adaptando al 100% de su contenedor, decir que si quito la imagen el contenedor se vuelve mucho más pequeño. Es decir, es el contenedor el que realmente se está adaptando al tamaño de la imagen y no al revés como yo pretendía.

[cibermanu]

No sé donde está el problema, pero creo que la imagen no pilla la referencia de la altura del contenedor, aunque sí está definida.

[cibermanu]

¿Existe una herramienta que dado el código javascript/html de la web te saque la estructura de la página con sus dimensiones en % px etc etc??

EDITO:
Acabo de comprobar que el ancho lo coge al 100% del contenedor sin problemas, pero el alto nada de nada.
¿Qué os sugiere esto ?

[tunait]

Hola de nuevo cibermanu :)

Te cuento: un elemento de bloque lleva implícito un width del 100% (salvo si tiene un posicionamiento absoluto) pero no lleva implícito un height. Si le asignamos un height absoluto lo toma pero si le asignamos un height porcentual es relativo. Para que tome como referencia el valor del height del contenedor padre éste debe estar posicionado como relative (o absolute, creo, que alguien me corrija si me equivoco)

El contenedor padre de la imagen tiene asingado un height porcentual al padre que es este

Código:

.celdaProducto {
	width:80%;
	height:100%;
}

pero no está posicionado como relative por lo que el contenedor de la imagen no toma ningún valor concreto para la altura.

Te sugiero que juegues un poco con un documento nuevo aparte y hagas pruebas y veas qué pasa con las alturas de cada elemento usando o no position relative ;)