javascript将图像调整为全屏并保持宽高比

Question

我有一个手机幻灯片，我想要一个全屏选项。我创建了一个可以正常工作的伪全屏CSS，但是它会延伸图像以填充。我已经尝试了一些技术，比如将其封装在div中，并将CSS设置为自动高度和宽度，但仍然延伸。

该CSS只是将所有设置为0左上角和右下角。我知道它是一个“黑客”，但这对我的HTML5视频非常有用，它甚至保持了比例。虽然对图像不太热。我已经尝试过CSS3对象适合，但几乎没有浏览器支持afaik。

有没有办法让图像变为全屏并保持宽高比？也许可以使用像外观一样的信箱来填充其他空间（垂直或水平）。我需要这是动态的，因此它可以在多种不同屏幕尺寸的移动设备上运行。我在移动设备上看到了谷歌图片上的这项工作，但显然他们比我更聪明。

我在后端使用jQuery Mobile和PHP。我认为JS解决方案是最好的，但PHP也会受到欢迎。

Answer 1

我相信你正在寻找background-size属性。从CSS3开始，您可以将其设置为contain或cover。

含有，指定背景图像的规模应 尽可能大，同时确保它的两个尺寸小于 或等于背景 定位区域的相应的尺寸。

盖，指定背景图像的规模应 尽可能小，同时确保它的两个尺寸大于 或等于背景 定位区域的相应的尺寸。

MDN文档：https://developer.mozilla.org/en/CSS/background-size

background-size : cover将是一个全屏幕图像和background-size : contain将信箱效果。