我有一个移动幻灯片，我想为其设置全屏选项。我创建了一个伪全屏 CSS，它工作正常，但它会拉伸(stretch)图像以填充。我已经尝试了一些技术，比如将它包装在一个 div 中并将 CSS 设置为高度和宽度自动，但它仍然会拉伸(stretch)。
CSS 只是将 top bottom left 和 right 都设置为 0。我知道这是一个“hack”，但这对我的 HTML5 视频非常有用，它甚至可以保持比例。虽然图像不是那么热。我已经尝试过 CSS3 object-fit 但几乎没有浏览器支持 afaik。
有没有办法让图像全屏显示并保持纵横比？也许使用像 look 这样的信箱来填充其他空间(垂直或水平)。我需要它是动态的，以便它可以在具有不同屏幕尺寸的多个移动设备上运行。我已经在我的移动设备上的谷歌图像上看到了这项工作，但显然他们比我聪明。
我在后端使用 jQuery Mobile 和 PHP。我当时认为 JS 解决方案是最好的，但 PHP 也很受欢迎。
最佳答案
我相信您正在寻找 background-size 属性。从 CSS3 开始，您可以将其设置为 contain 或 cover。
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 文档:https://developer.mozilla.org/en/CSS/background-size
background-size : cover 将是全屏图像，background-size : contain 将是信箱效果。
关于php - javascript将图像调整为全屏并保持纵横比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11415805/