plantilla - Forzar relación de aspecto con CSS no funciona en Safari

plantilla divi wordpress gratis

Question

El siguiente código funciona bien en Firefox y Chrome, pero no en Safari (probado en Mac y iPad): http://jsfiddle.net/eFd87/ .

<div id="wrapper">
    <div id="content">
        <img src="http://farm3.staticflickr.com/2783/4106818782_cc6610db2c.jpg">        
    </div>
</div>

#wrapper {
    position: relative;
    padding-bottom: 33.33%; /* Set ratio here */
    height: 0;
}
#content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: green;
    text-align: center;
}
#content img {
    max-height: 100%;
}​

El objetivo es tener un envoltorio div mantener una relación de aspecto fija ( en mi aplicación web es un carrusel ), y la imagen dentro de él cambiar el tamaño para caber en el div (y centro).

En Safari, la imagen no se muestra debido a la height: 0 (lo que dará una altura de 0 para la img). Con height: 100% la visualización de la imagen, pero no se ajusta al div (se desborda).

¿Ves alguna solución para este problema? He estado en esto por horas ...

Answer 1

El ancho 100% y la altura me funcionaron automáticamente en Safari. Inicialmente, estaba usando el 100% tanto para w como h, lo que funciona bien en FF pero no en Safari.

.stretch {
  width: 100%;
  height: auto;
}

HTML:

<div>
    <img src="images/someimg.jpg" class="stretch" alt="" />
</div>

Y, oh, he usado Bootstrap que agrega esto a todos los elementos.

*, *:before, *:after {
  -moz-box-sizing: border-box;
}

Answer 2

Esta no es exactamente una gran respuesta a su pregunta, pero es una respuesta, no obstante.

Dudo mucho que sea posible hacerlo con un enfoque de solo CSS porque, hasta donde yo sé (me complace que lo corrijan), no hay forma de realizar cálculos basados ​​en la propiedad de otro CSS. Así que width: height * 1.3; por ejemplo no es posible. Tampoco puede usar% porque ese es un porcentaje del padre, no de sí mismo.

La forma en que está mirando el relleno inferior no funcionará de manera confiable, funcionará en su pantalla, pero si la pantalla de otra persona tiene una relación de aspecto diferente o tienen muchas barras de herramientas que cambian la relación de aspecto de la ventana del navegador, entonces la relación de aspecto será incorrecta. % es del padre que, a menos que pueda garantizar el tamaño, no puede usar realmente.

Por lo que puedo decir, tu única opción en esto es javascript. el más obvio y mi recomendación sería jQuery u otro marco para calcular y establecer explícitamente la altura según el ancho. Sin embargo, no te olvides de escuchar el cambio de tamaño de la ventana del navegador.