Problemas con las barras de desplazamiento en el cambio de tamaño cuando intenta ajustar la imagen a la pantalla sin distorsionar

Question

Estoy tratando de hacer un tipo de efecto de presentación de diapositivas de pantalla completa código jsfiddle aquí, pero tengo dudas sobre cómo hacerlo. Como se puede ver en mi violín de ejemplo, quiero que la imagen sea lo más grande posible sin distorsionarla (ajustar a la pantalla). También quiero que se centre vertical y horizontalmente.

Centrado horzontal Se atiende en CSS, pero he tenido que usar JavaScript para centrado vertical.

Mis preguntas son:

1. ¿Hay una mejor manera de hacer algo de esto (por ejemplo, todo en CSS)?
2. En la primera carga, si la imagen (antes de que se haya escalado) es más ancha que la ventana gráfica, una barra de desplazamiento está presente mientras mi script calcula la altura de la ventana gráfica. Esto significa que cuando mi guión se ajusta al DIV e IMG a la ventana, hay un espacio blanco en la parte inferior, esa es la altura de la barra de desplazamiento. Puedo evitar esto especificando el desbordamiento: oculto, pero parece un poco activo. ¿Hay una mejor manera? ¿Sería mejor alternar la imagen?
3. Cuando cambio de tamaño para que el DIV sea más ancho que la imagen, obtengo una sección blanca debajo del Div Negro, que crea una barra de desplazamiento vertical. Nuevamente puedo deshacerme de esto con desbordamiento: oculto, pero no me gusta ese enfoque. Quiero saber por qué está allí y cómo deshacerse de él.
4. A veces puedo hacer que aparezca una barra de desplazamiento horizontal y, mientras cambio de su tamaño, se enciende/apagan. Overflow: Hidden soluciona esto, pero quiero una solución más limpia.
5. ¿Hay alguna forma mejor de codificar esto, o puede mi jQuery/JavaScript estar optimizado más allá?

Answer 1

Bueno ... esos son complicados. La mejor manera que he encontrado cómo hacer esto es poner su contenido en una sola mesa celular y establecer las propiedades de alineación vertical y horizontal en el medio y el centro, creo. Pero de todos modos, se puede hacer. Jugaré con él y veré si puedo obtener un ejemplo juntos.

EDITAR:

Ok, lo primero que aconsejaría es dejar que el navegador cambie proporcionalmente las cosas. No necesita cambiar el tamaño del DIV, solo la imagen. Puede dejar que el navegador también descubra la alineación vertical, que es una opción mucho mejor que calcularlo. Esto se puede hacer colocando el contenido en una sola tabla celular. El código de ejemplo a continuación es HTML puro y CSS. Puede agregar algo al efecto que ya tiene que cambiar la altura y el ancho de la imagen entre 100% automático y automático 100% en función de la altura de IMG frente a la altura de la ventana. Esperemos que esto te acerque un poco más a tu objetivo.

<table style="background-color:#ddd; width:100%; height:100%">
  <tr>
    <td align="center">
      <div id="fulldiv">
        <img style="width:100%" id="photo" src="http://assets.perfectlytimedphotos.com/hashed_silo_content/silo_content/21003/resized/coke.jpg">
      </div>
    </td>
  </tr>
</table>

Answer 2

No conozco ninguna solución de Browser en HTML/CSS puro para lograr lo que ha pedido. Cualquier elemento con una relación de aspecto y un ancho de fluido activará una "condición de carrera" cuando el navegador decida mostrar / ocultar la barra de desplazamiento. Un navegador forzará una barra de desplazamiento cuando detecta esta situación con elementos bajo su control. Esto también se puede simular con JavaScript. También encontré este problema y creé una pequeña biblioteca:

https://github.com/ocbnet/layout

También hay una demostración que implementa lo que el OP estaba pidiendo:

http://www.ocbnet.ch/github/layout/demo/fullscreen.html

Answer 3

1. Sí (para la parte de altura del 100%): html,body,div {height:100%}
2. Desbordamiento: Hidden me parece agradable. Otras posibles soluciones:
   1. <script>document.write('<img src="..." width="'+window.width()+'" [...] /> (Sin embargo, se debe evitar el documento.Write)
   2. <img src="" width="1" height="1" /> (es decir, defina un pequeño tamaño predeterminado -> sin barra de desplazamiento)
   3. @GERBEN Sugerencia: CSS Max-Width (mejor)
3. Parece ser el espacio que tomaría la barra de desplazamiento horizontal. Solo obtengo este problema en una relación de tamaño+específico también.
4. Esto es cuando el Pictureratio es igual o bastante cercano al fulldivratio. No puedo encontrar a Hoo con desbordamiento: oculto.
5. No tengo idea, parece lo suficientemente bueno en mi opinión.

Entonces sí, la extraña barra de desplazamiento sobre el cambio de tamaño ocurre debido al efecto fronterizo, la barra de desplazamiento aparece cuando cambias del if hacia else o viceversa.

Con este jsfiddle Nunca obtengo barra de desplazamiento horizontal, pero todavía tengo vertical de vez en cuando.

Answer 4

Puedes hacerlo:

<div>
    <img id="photo" src="">
</div>

div {
width: 100%;
height: 100%;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
position: relative;
}

Todo es puro HTML y CSS. Una alternativa a la respuesta de Joseph de usar tabla si no desea usar la mesa en su estructura.