Elementos superpuestos de Safari/Chrome que se configuran con bloque en línea

Estoy tratando de construir una página para mostrar dos imágenes una al lado de la otra. Quiero estos elementos centrados en la pantalla en formato de libro y, a medida que se cambia el tamaño del navegador, se cambia la altura de las imágenes para que llenen la ventana.

Para hacer esto, estoy usando el bloque en línea de visualización con el centro alineado con el texto para lograr el efecto. Funciona muy bien en FF, pero cuando abro en Safari o Chrome al cambiar el tamaño, los divs comienzan a superponerse. Creé este jsfiddle para mostrar un ejemplo de mi dom. Necesito el bloque en línea de divs pageOne y pageTwo porque luego posiciono absolutamente los enlaces en la parte superior de las imágenes de la página.

¿Qué me estoy perdiendo?

Para ver ese problema, deberá abrir jsFiddle en safari/chrome y hacer que el panel de resultados sea más grande que el predeterminado. Comience con su navegador aproximadamente a la mitad de su ancho/alto normal. A medida que ejecuta jsFiddle, amplíe su navegador y observe cómo las dos imágenes comienzan a superponerse. Si lo abres en FF, no se superpondrán.

http://jsfiddle.net/X9NNh/1

Pude acercarme al efecto que quiero en todos los navegadores con este uso de tablas:

http://jsfiddle.net/x82uK/

preguntado el 03 de julio de 12 a las 23:07

La otra cosa que noté es que si se superponen al expandir el navegador y se separan cuando disminuyo el navegador... en FF permanecen pegados (¿sp?) Uno contra el otro, que es el efecto que quiero. -

1 Respuestas

De hecho, esto es complicado porque esos contenedores de bloques en línea no cambian de tamaño para adaptarse a sus contenidos a medida que escalan sus contenidos.

Aunque hará que su trabajo sea más difícil (léase: requiere Javascript) cuando se trata de posicionar absolutamente los enlaces encima de las imágenes, aquí hay un enfoque alternativo usar background-size: contain.

HTML:

<div id="issue">
  <div id="leftPage" class="page" style="background-image: url(http://placekitten.com/g/304/400);"></div>
  <div id="rightPage" class="page" style="background-image: url(http://placekitten.com/g/304/400);"></div>
</div>

CSS:

html, body {
  height: 100%;
  background: #666;
}
#issue {
  position: absolute;
  top: 20px; bottom: 20px;
  left: 20px; right: 20px;
  border: 1px solid grey;
  box-sizing: border-box;
  background: #EEE;
}
.page {
  position: absolute;
  top: 30px; bottom: 30px;
  background-repeat: no-repeat;
  background-size: contain;
}
#leftPage {
  background-position: center right;
  left: 30px; right: 50%;
}
#rightPage {
  background-position: center left;
  left: 50%; right: 30px;
}

Respondido 04 Jul 12, 02:07

Nunca pensé en usar este enfoque... Tendré que intentarlo. Realizo la carga diferida de las imágenes, así que tendré que escribir un nuevo complemento para la carga diferida y reemplazar la URL de fondo, supongo ... y sí, el posicionamiento absoluto de mis enlaces será más complicado porque no sé cuál es el ancho real de la div.page es. Supongo que puedo determinar la relación de aspecto de la imagen y calcular el ancho en función de la altura del contenedor... pero sí, vale la pena probarlo. ¡Gracias! - jake dempsey

¡De hecho, me diste una gran idea con tu comentario "los contenedores de bloques en línea no cambian de tamaño para adaptarse a sus contenidos a medida que escalan sus contenidos"! Acabo de agregar un fragmento de código a mi controlador de cambio de tamaño para ajustar el ancho del contenedor .page para que sea el ancho de la img en él... y ahora funciona en Safari, Chrome y ff. jsfiddle.net/X9NNh/3 - jake dempsey

sí, el ancho de cambio de tamaño basado en la imagen es inestable... de vuelta a la mesa de dibujo. - jake dempsey

No terminé usando este enfoque, pero fue un gran concepto. Terminé simplemente usando display:inline y usando el contenedor para determinar el posicionamiento en función del desplazamiento de las imágenes en el contenedor. - jake dempsey

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.