javascript将图像调整为全屏并保持纵横比

Question

I have a mobile slideshow that I want to have a fullscreen option for. I have created a pseudo-fullscreen CSS that works fine but it stretches the image to fill. I have tried some techniques like wrapping it in a div and setting the CSS to auto for height and width but it still stretches.

The CSS just sets all to 0 top bottom left and right. I know its a "hack" but this works great for my HTML5 video it even keeps the ratio. not so hot for images though. I have tried the CSS3 object-fit but that has little to no browser support afaik.

Is there a way to get the image to go fullscreen and keep the aspect ratio? maybe using a letterbox like look to fill the other space(either vertically or horizontally). I need this to be dynamic so it will work on multiple mobile devices with different screen sizes. I have seen this work on google images on my mobile devices but obviously they are more clever than I am.

I am using jQuery Mobile and PHP on the back end. I was thinking a JS solution would be best but PHP would be welcome too.

Answer 1

I believe you're looking for the background-size property. You can set it to either contain or cover as of CSS3.

contain, which specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

cover, which specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.

MDN Docs: https://developer.mozilla.org/en/CSS/background-size

background-size : cover would be a full-screen image and background-size : contain would be the letterbox effect.