Question

我正在尝试使用对象，但它似乎与新的浏览器不兼容等等 - 我只是希望它覆盖空间而不是在调整大小时被压扁，在css或jquery中有没有办法只是覆盖空间而不是调整大小和压扁？

Answer 1

如果你可以在另一个元素而不是图像标签上使用背景图片，那么你可以像这样使用background-size: cover：

#myDiv{
    background-image:url(/path/to/bg/image); 
    background-size: cover
}

Answer 2

在将视口设置为设备宽度后使用视口宽度和高度属性，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

你的css：

width:100vw; height:100vh; /*this is like a percentage of the viewport width and height*/

Answer 3

使用jQuery，

    $(function () {

        var theWindow = $(window),
            $bg = $("#bg"),
            aspectRatio = $bg.width() / $bg.height();

        function resizeBg() {

            if ((theWindow.width() / theWindow.height()) < aspectRatio) {
                $bg.removeClass()
                    .addClass('bgheight');
            } else {
                $bg.removeClass()
                    .addClass('bgwidth');
            }

        }

        theWindow.resize(function () {
            resizeBg();
        }).trigger("resize");

    });

请参阅demo here

图像调整窗口大小调整大小？

3 个答案: