¿Bug con max-height en Chrome?

DarkKing · #1 (**permalink**) 04/05/2012, 13:05

Buenas a todos. Tengo una imagen de 400x200 píxeles y quiero que como mucho tenga 100px de alto. El código en CSS sería el siguiente:

Código CSS:

Ver originalimg {
    max-height:100px;
    width:auto;
}

En Internet Explorer y en Firefox la imagen se me visualiza con un tamaño de 200x100 píxeles.
Pero en Chrome se me muestra a 400x100 píxeles. La propiedad "max-height" la cumple, pero "width:auto" la ignora, y, en lugar de ajustar el ancho en proporción al alto, muestra el ancho original.

En cambio, si lo hago al revés, sí que funciona:

Código CSS:

Ver originalimg {
    max-width:100px;
    height:auto;
}

Lo que quiero es establecer el máximo de alto por css y que el ancho se ajuste en proporción y que se muestre correctamente en Chrome.

Gracias

IsaBelM · #2 (**permalink**) 04/05/2012, 14:46

la respuesta es no.

estás haciendo una regla de 3 y esto lo hace cualquier navegador

DarkKing · #3 (**permalink**) 04/05/2012, 16:07

Cita:

Iniciado por IsaBelM

la respuesta es no.

estás haciendo una regla de 3 y esto lo hace cualquier navegador

¿No qué? En Chrome no me funciona, pero en IE y Firefox sí.

kseso? · #4 (**permalink**) 04/05/2012, 17:40

El comportamiento de "auto" es totalmente diferente en width y height.

Max/min-height/width se supone que se debería utilizar en combinación con height/width, generalmente éstos últimos con una unidad del valor relativa y los primeros en absoluta.

Una imagen sólo necesita declarar una de las dos medidas, la otra se reescala sin deformarse en función de la declarada.

DarkKing · #5 (**permalink**) 04/05/2012, 19:39

Cita:

Iniciado por kseso?

El comportamiento de "auto" es totalmente diferente en width y height.

Max/min-height/width se supone que se debería utilizar en combinación con height/width, generalmente éstos últimos con una unidad del valor relativa y los primeros en absoluta.

Una imagen sólo necesita declarar una de las dos medidas, la otra se reescala sin deformarse en función de la declarada.

Pues tanto si pongo auto como si no, Chrome no redimensiona la imagen en proporción.

kseso? · #6 (**permalink**) 05/05/2012, 07:31

Cita:

Iniciado por DarkKing

Pues tanto si pongo auto como si no, Chrome no redimensiona la imagen en proporción.

Pues vale.

Por cierto, antes de "encontrar" bugs o fallos ha tenido presente aquello de la cascada y la herencia en css?

Pruebe:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
 
<title>Kseso: jugando con Css</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
  border: 0 none;
}
html, body {width: 100%; height: 100%;}
 
img.ciento {
width: 100%;
height: auto;
}
img.altura {
height: 200px;
width: auto;
}
img.anchura {
width: 200px;
height: auto;
}
</style>
</head>
<body>
<img class="ciento" alt="" src="http://farm8.staticflickr.com/7170/6773988875_d8f12b3a0c_b.jpg" />
<img class="altura" alt="" src="http://farm8.staticflickr.com/7170/6773988875_d8f12b3a0c_b.jpg" />
<img class="anchura" alt="" src="http://farm8.staticflickr.com/7170/6773988875_d8f12b3a0c_b.jpg" />
</div>
</body>
</html>

Si lo considera necesario adjunto capturas de Chrome con los valores computados de las tres representaciones de la imagen.

DarkKing · #7 (**permalink**) 06/05/2012, 07:13

kseso?, gracias a tu elaborada respuesta me he podido dar cuenta que el fallo estaba en un dato que no había expuesto en el mensaje y que es el siguiente: en la etiqueta <img /> tenía especificado el alto y el ancho. Esto provocaba que Chrome no se ajustara correctamente a lo que yo le tenía escrito por CSS.
A partir de esto, se me ha ocurrido una cosa para solucionarlo que me ha funcionado. Es añadir el auto tanto en el widh como en el height

Código CSS:

Ver originalwidth:auto;
height:auto;
max-height:50px;

Un saludo