Question

I’m trying to show an image (of arbitrary width/height) in full screen when the screen (also of arbitrary width/height). I’m using HTML/CSS/JS. I want the image to always take up the full screen. If the image is a lower aspect ratio than the screen then I should clip the top and bottom. If the image is a higher aspect ratio than the screen then I should clip the left and right. I never want to see black around the edges.
I can do it using background-image (and background-position, etc.) but I’m having an issue with that (the image flashes as I update it). So I’d like to use an tag. Does anyone know how I’d do that?

Answer 1

I think the question is nice and clear and obviously the OP doesn’t have any code… that’s why he’s asking the question.

I’ve run into that exact issue before. I don’t think there’s a way to do it using HTML/CSS if you want the image to end up larger than the containing element with the excess clipped unless you can put the image in the background. If you need to use the tag as you state, then a good solution is to do this imperatively. Here’s what I did.

function setImagePosition() {
    var img = q(".viewCamera #viewport img");
    if (outerWidth/outerHeight > img.naturalWidth/img.naturalHeight) {
        img.style.width = format("{0}px", outerWidth);
        img.style.height = "";
        img.style.top = format("{0}px", (outerHeight - img.clientHeight) / 2);
        img.style.left = "0px";
    } else {
        img.style.width = "";
        img.style.height = format("{0}px", outerHeight);
        img.style.top = "0px";
        img.style.left = format("{0}px", (outerWidth - img.clientWidth) / 2);
    }
}

Let me explain…

The outerWidth/outerHeight results in the aspect ratio of the window. The img.naturalWidth/img.naturalHeight is the aspect ratio of the image. If the first is greater then we need to set the width of the image to the width of the window and calculate the top value to center the image vertically. If the second is greater then we need to set the height of the image and then use the left to center the image horizontally.

Hope that helps! You can find a bunch of Windows 8 HTML/JS related help in my codeSHOW project at codeshow.codeplex.com and in the Windows Store at aka.ms/codeshowapp.