javascript将图像调整为全屏并保持纵横比
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.
我有一个移动幻灯片，我想要一个全屏选项。 我已经创建了一个伪全屏CSS，它可以很好地工作，但它会拉伸图像来填充。 我已经尝试了一些技术，比如将它包装在div中并将CSS设置为auto以获得高度和宽度，但它仍然会延伸。 p>
CSS只将全部设置为0左上角和右下角。 我知道这是一个“黑客”，但这对我的HTML5视频非常有用，甚至可以保持这个比例。 虽然不是那么热的图像。 我已经尝试过CSS3对象，但是几乎没有浏览器支持afaik。 p>
有没有办法让图像全屏显示并保持纵横比？ 也许使用像看起来填充其他空间（垂直或水平）的信箱。 我需要它是动态的，因此它可以在不同屏幕尺寸的多个移动设备上运行。 我在移动设备上看到谷歌图像的这项工作，但显然它们比我更聪明。 p>
我在后端使用jQuery Mobile和PHP。 我认为JS解决方案是最好的，但PHP也会受到欢迎。 p> div>
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.