我有一个移动幻灯片，我希望有一个全屏选项。我已经创建了一个伪全屏CSS，它可以很好地工作，但它会拉伸图像来填充。我已经尝试了一些技术，比如将它包装在div中并将CSS设置为auto以获得高度和宽度，但它仍然会延伸。
CSS只将全部设置为0左上角和右上角。我知道它是一个＆＃34; hack＆＃34;但这对我的HTML5视频来说非常有用，甚至可以保持这个比例。虽然不是那么热的图像。我已经尝试过CSS3对象，但是几乎没有浏览器支持afaik。
有没有办法让图像全屏显示并保持纵横比？也许使用像看起来填充其他空间（垂直或水平）的信箱。我需要它是动态的，因此它可以在不同屏幕尺寸的多个移动设备上运行。我在移动设备上看到谷歌图像的这项工作，但显然它们比我更聪明。
我在后端使用jQuery Mobile和PHP。我认为JS解决方案是最好的，但PHP也会受到欢迎。
答案 0 :(得分：1)
我相信你正在寻找background-size财产。从CSS3开始，您可以将其设置为contain或cover。
包含，指定应缩放背景图像 尽可能大，同时确保其尺寸更小 大于或等于背景的相应尺寸 定位区。
封面，指定应缩放背景图片 尽可能小，同时确保其尺寸更大 大于或等于背景的相应尺寸 定位区。
MDN文档：https://developer.mozilla.org/en/CSS/background-size
background-size : cover将是一个全屏图像，background-size : contain将是信箱效果。