Got it, let's tackle this problem step by step. Your core issue is that the current window size uses fixed screen-based ratios instead of matching the actual image's aspect ratio, which causes distortion or black bars. Here's a robust solution that automatically handles any image ratio, scales based on your screen size, and requires zero manual setup for your 1500 images.

What's Wrong with the Current Code? #

• The random position calculation (Math.floor(Math.random())) only gives 0 or 1, so your window always sticks to the edge of the screen.
• Fixed window dimensions (screen.width/5, screen.height/3) ignore the image's natural aspect ratio, leading to misfit.

Fixed & Improved Code #

function openWin() {
  // Your full image array (1500 images work here too)
  const imageArray = [ 
    "images/testpic.png", 
    "images/testpic2.png", 
    "images/testpic3.png", 
    "images/testpic4.png", 
    "images/testpic5.png"
  ];

  // Pick a random image from the array
  const randomImageSrc = imageArray[Math.floor(Math.random() * imageArray.length)];

  // Preload the image to get its natural width/height
  const img = new Image();
  img.src = randomImageSrc;

  img.onload = function() {
    // Calculate the image's aspect ratio (width / height)
    const imageAspectRatio = this.width / this.height;

    // Define maximum window size (adjust percentages based on your preference)
    const maxWindowHeight = Math.floor(screen.height * 0.7); // 70% of screen height
    const maxWindowWidth = Math.floor(screen.width * 0.7);   // 70% of screen width

    let windowWidth, windowHeight;

    // Calculate window dimensions while preserving aspect ratio
    if (imageAspectRatio > 1) {
      // Wide image (e.g., 3:1, 16:9) – prioritize max width first
      windowWidth = maxWindowWidth;
      windowHeight = Math.floor(windowWidth / imageAspectRatio);

      // If calculated height exceeds max allowed, adjust to max height and recalculate width
      if (windowHeight > maxWindowHeight) {
        windowHeight = maxWindowHeight;
        windowWidth = Math.floor(windowHeight * imageAspectRatio);
      }
    } else {
      // Tall or square image (e.g., 1:1, 1:2) – prioritize max height first
      windowHeight = maxWindowHeight;
      windowWidth = Math.floor(windowHeight * imageAspectRatio);

      // If calculated width exceeds max allowed, adjust to max width and recalculate height
      if (windowWidth > maxWindowWidth) {
        windowWidth = maxWindowWidth;
        windowHeight = Math.floor(windowWidth / imageAspectRatio);
      }
    }

    // Calculate random position that keeps the window fully on screen
    const windowLeft = Math.floor(Math.random() * (screen.width - windowWidth));
    const windowTop = Math.floor(Math.random() * (screen.height - windowHeight));

    // Open a blank window with the calculated dimensions and position
    const newWindow = window.open("", "", `left=${windowLeft}, top=${windowTop}, width=${windowWidth}, height=${windowHeight}`);

    // Insert the image into the window, ensuring it fits perfectly
    newWindow.document.write(`
      <style>
        body { margin: 0; padding: 0; overflow: hidden; }
        img { width: 100%; height: 100%; display: block; }
      </style>
      <img src="${randomImageSrc}">
    `);
    newWindow.document.close();
  };
}

Key Improvements #

1. Automatic Aspect Ratio Matching:
   • We preload the image to fetch its natural width and height, then calculate its aspect ratio dynamically. No manual input needed for your 1500 images.
2. Screen-Safe Scaling:
   • The window size is capped at 70% of your screen's width/height (adjust the 0.7 values if you want larger/smaller windows) to ensure it never gets too big for your display.
3. Proper Random Positioning:
   • The window's left/top positions are calculated to keep the entire window within the screen bounds, so no more off-screen windows.
4. Perfect Image Fit:
   • The inserted image fills the window exactly without distortion, since the window's aspect ratio matches the image's.

Notes for Your Use Case #

• Since you don't care about user experience, we don't add loading states or error handling (but you could add img.onerror if you want to handle broken image links).
• Image caching will make subsequent loads of the same image faster, so performance stays snappy even with 1500 images.

内容的提问来源于stack exchange，提问作者OlivTime