1

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

CSS 只是将左下角和右下角全部设置为 0。我知道这是一个“黑客”，但这对我的 HTML5 视频非常有用，它甚至可以保持比例。不过，对于图像来说并不那么热。我已经尝试过 CSS3 object-fit，但几乎没有浏览器支持 afaik。

有没有办法让图像全屏并保持纵横比？可能使用类似外观的信箱来填充其他空间（垂直或水平）。我需要它是动态的，以便它可以在具有不同屏幕尺寸的多个移动设备上工作。我在移动设备上的谷歌图片上看到过这项工作，但显然他们比我更聪明。

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

4

1 回答 1

1

我相信你正在寻找background-size房产。您可以将其设置为 CSS3contain或coverCSS3。

contains，它指定背景图像应该被缩放到尽可能大，同时确保它的两个尺寸都小于或等于背景定位区域的相应尺寸。

cover，它指定背景图像在保证两个尺寸都大于或等于背景定位区域对应尺寸的情况下，应尽可能缩小。

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

background-size : cover将是全屏图像，并且background-size : contain将是信箱效果。

于 2012-07-10T16:08:48.413 回答