Estoy trabajando en un proyecto con unos criterios muy concretos. Tengo un botón que abrirá una imagen aleatoria de una matriz cuando se haga clic en una nueva ventana ubicada aleatoriamente en la pantalla, y dimensionaré la altura de la ventana/imagen en relación con el tamaño del monitor mientras mantengo la relación de aspecto de la imagen original.
El problema es que todas las imágenes en la matriz tienen diferentes resoluciones y relaciones de aspecto, y me gustaría que la ventana en la que se abren se ajuste bien a la imagen.
Aquí está el código con el que estoy trabajando hasta ahora:
function openWin() { var myWindow; var rand = Math.random(); var l = screen.width * Math.floor(Math.random()); var t = screen.height * Math.floor(Math.random()); var w = screen.width / 5; var h = screen.height / 3; var arr = [ "images/testpic.png", "images/testpic2.png", "images/testpic3.png", "images/testpic4.png", "images/testpic5.png"]; var value = arr[Math.floor(Math.random() * arr.length)]; myWindow = window.open(value, "", "left= "+ l +", top= "+ t +", width= " + w +", height=" + h +" "); }En este punto, puedo abrir la imagen aleatoria de una matriz, colocarla aleatoriamente en la pantalla, con la altura de la nueva ventana escalada a la altura del monitor. PERO el ancho de la nueva ventana también se escala al ancho del monitor y no al ancho de la imagen. Esto da barras negras o corta partes de la imagen.
He estado tratando de obtener una respuesta por un tiempo y adelantaré un par de cosas:
Me doy cuenta de que esto es muy específico, pero se agradece cualquier ayuda y lo siento si mi código es un desastre.
EDITAR: Aquí hay un gif que visualiza el tipo de funcionalidad que estoy buscando. Nota: Algunas de las imágenes son HD pero redimensionadas en relación con el tamaño de la pantalla Ver aquí
Como no pude hacerlo funcionar aquí, generé un JSFiddle para ti:
Aquí mi idea. Obtén todas las imágenes de la página en imagesArr . Luego, para cada uno de ellos, haga un objeto Image() con sus características. Agregue un detector de eventos a cada imagen para abrir la función openWindow .
