¿Cuál es la mejor técnica para una presentación de imágenes básica para imágenes de diferentes tamaños y relaciones de aspecto?

Hay un par de supuestos demasiado generales en la pregunta que deben volverse más concretos, por lo que lo dividiré en 3 posibles soluciones (2a-2c).

1. La galería se encuentra en un lugar determinado del sitio web.

¿Es ese un lugar en el espacio 2D, como por ejemplo, una imagen de encabezado? Si es así, existe un malentendido conceptual sobre la forma en que funcionan las presentaciones de diapositivas. Los contenedores de imágenes están en capas uno encima del otro. El “siguiente” contenedor se empuja hacia la parte superior de la pila y se desvanece lentamente hasta su opacidad total, bloqueando el contenedor “anterior”. Si la pila de contenedores de imágenes no tiene exactamente la misma dimensión, el efecto de aumento / desaparición gradual fallará ya que el contenedor subyacente se asomará por los lados.

2. Las imágenes deben mostrarse correctamente

Definir correctamente. ¿Es ese píxel para la fidelidad de píxeles desde la imagen de origen hasta la visualización de la página web? ¿Es esa escala proporcional? ¿Es la fidelidad de píxeles pero con el recorte?

2a) píxel para fidelidad de píxel

En este caso, deberá abandonar el concepto de “cierto lugar en el sitio web”. El enfoque más apropiado sería utilizar un patrón de “caja de luz” para abrir una presentación de diapositivas en una capa encima de toda la página. jQuery Colorbox es un complemento popular para esto, y también puede mantener la fidelidad de píxeles.

2b) escala proporcional

Para el escalamiento proporcional, puede definir un cuadro en su página web (probablemente un cuadrado), dentro del cual puede colocar en su pila de imágenes. CSS se puede utilizar para mantener la escala de la imagen proporcional dentro de los límites de sus contenedores predefinidos. En CSS, establezca el ancho y la altura en automático. Con javascript, aplique el 100% al ancho de las imágenes de paisajes o a la altura de los retratos. Desafortunadamente, el complemento jQuery más popular para presentaciones de diapositivas, jQuery cycle, está diseñado para trabajar directamente en imágenes, en lugar de sus divs que contienen. He escrito mis propias presentaciones de diapositivas para este tipo de cosas, pero volveré y editaré esta respuesta si puedo encontrar una que se adjunte al contenedor de forma predeterminada.

2c) fidelidad de píxeles pero recortada

jQuery Cycle realmente ofrece esto. Todo lo que necesita hacer es establecer un ancho o alto fijo, pero no ambos. Algo así como: $ (‘encabezado’). Cycle ({ancho: 960, ajuste: verdadero, aspecto: verdadero});

Finalmente, la última suposición es que tiene un programa de nivel medio (WordPress, CMS u otro código de servidor) que asume la responsabilidad de ver la carpeta de imágenes y actualizar el HTML en su página web.