Question

我试图将图像（尺寸：1678 x 1302）放入窗口的宽度和高度，如下所示。

<!DOCTYPE html>
<html>
    <head>
        <title>Moving Screen Saver</title>
        <style>
            html, body {
                position: relative;
                height: 100%;
                width: 100%
            }
            #bgimg {
                background-image: url("background2.jpeg");
                position: absolute;
                background-repeat: repeat-x;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="bgimg" width=500 height=500>
        </div>
    </body>
</html>

图像应适合观察窗口。我不能使用'background-repeat：repeat-y'，因为与顶部相比，图像底部的图像阴影不同。即使图像尺寸与窗口尺寸不匹配，有没有办法使图像正确适合（不丢失图像的任何部分）？

Answer 1

try this 
<!DOCTYPE html>
<html>
    <head>
        <title>Moving Screen Saver</title>
        <style>
            html, body {
                position: relative;
                height: 100%;
                width: 100%
            }
            #bgimg {
                background-image:  url(images/marc.jpg);
                position: absolute;
                background-repeat: no-repeat;
                width: 100%;
                height: 100%;
                background-size: cover;
            }
        </style>
    </head>
    <body>
        <div id="bgimg" width=500 height=500>
        </div>
    </body>
</html>

如何使用CSS

1 个答案: