Imagen receptiva altura máxima 100% no funciona en firefox

Actualmente estoy tratando de hacer un cambio de tamaño de la imagen dependiendo de las dimensiones del navegador. He logrado que la imagen cambie de tamaño horizontalmente, si hago que la ventana del navegador se estreche, la imagen cambiará de tamaño proporcionalmente bien. Sin embargo, cuando cambio el tamaño de la ventana verticalmente, Firefox simplemente no parece querer hacerlo. El código es bastante simpleImagen receptiva altura máxima 100% no funciona en firefox

<body> 

    <div id="content"> 
     <img src="images/abc.jpg"> 
    </div>  

</body>

y el CSS:

#content { 
    height: 100%; 
    padding: 50px; 
} 


#content img{ 
    max-height:100%; 
    max-width: 100%; 
}

Otra cuestión es que la imagen hace parecen cambiar el tamaño verticalmente en cromo, pero tengo que arrastrar la parte inferior del navegador así sobre la imagen antes de que comience a hacer esto. Prefiero que la imagen comience a reajustarse tan pronto como el relleno de contenido inferior "golpee" la parte inferior de la imagen, por así decirlo. Espero que esto tenga sentido.

Cualquier ayuda muy apreciada

Fuente

2012-08-06 bestfriendsforever

¿Puede dar una muestra de imagen? ¿Qué dimensiones tiene 'abc.jpg'? – orique

Creo que la altura del # contenido probablemente sea más del 100% desde que usaste el relleno. ¡Básicamente, agrega 50 + 50 de arriba y abajo! Para verificar, puedes intentar dar una altura específica al cuerpo –

Ok, abc.jpg es grande. para que pueda ver todos los detalles en la pantalla en la que lo esté viendo. Digamos 1500 x 1000 px – bestfriendsforever

Debido a la altura potencialmente podría seguir para siempre, usted no puede ajustar la altura de todo lo relativo a la ventana del navegador para ser una función del porcentaje. Lo que estoy diciendo es que tendrás que ponerlo dentro de algo con una altura fija para usar un valor porcentual. ¡Buena suerte!

-b

Fuente

2012-08-06 15:20:37 OneChillDude

Ok, gracias. Aunque eso derrota el propósito de esta imagen ya que me gustaría que cambie el tamaño de la altura y el navegador para que pueda cambiar el tamaño del navegador para "acercar" el zoom parece funcionar bien en [este sitio web] (http://www.olivierhess.com/) – bestfriendsforever

Sólo se haya especificado las propiedades de "max-width" "max-height" y. Si no especifica las propiedades reales de "ancho" o "alto", la imagen tomará inicialmente el ancho y la altura de sus dimensiones físicas (si no es mayor que la altura máxima y el ancho máximo especificados).

Dijo que, el comportamiento que ha notado, es correcto. La respuesta es, como ya se mencionó, especificar también una propiedad de ancho o alto inicial, dependiendo de si su imagen es vertical u horizontal.

Fuente

2012-08-06 15:20:59 hotS85

probar esto, tomado de Twitter Bootstrap 2

html,body{height:100%;} 
#content {padding: 5%;} 
#content img { 
max-height: 100%;/* Part 1: Set a maxium relative to the parent */ 
width: auto\9; 
/* IE7-8 need help adjusting responsive images */ 
max-width: auto; 
/* Part 2: Scale the height according to the width, otherwise you get stretching */ 
vertical-align: middle; 
border: 0; 
-ms-interpolation-mode: bicubic; 
}

Fuente

2012-12-13 08:32:37

Esto no parece funcionar para mí. ¿Puedes proporcionar una demostración? – KatieK

Es that lo que quiere?

De hecho, solo agregué una altura a html y cuerpo, por lo que #contents height no llega a alto.

body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
}

(Y-cuadro de dimensionamiento: Frontera-caja para #content, porque parece que te gustaría que)

Fuente

2012-12-13 08:43:04 dave

Imagen receptiva altura máxima 100% no funciona en firefox

Respuesta

Cuestiones relacionadas