Question

如何在HTML中正确设置身体背景图像以进行缩放？我正在开发Chrome扩展程序，因此无需担心移动设备（？）当前的HTML页面非常简单，我只需要它来显示图像（最终将显示文件夹中的随机图像，但现在硬编码图像就足够了）。如何在不同屏幕尺寸的不同设备（即平板电脑，笔记本电脑，计算机外接显示器）上使用铬合金并保持图像质量时，如何使图像可缩放？

<html>
    <head>
        <title> New Tab </title>
    </head>
    <style>
    body {
        background-image:url('indexImage.png');
        background-repeat:no-repeat;
        background-size:cover;
        background-position: center;
    }
    </style>

    <body>
    </body>
</html>

Answer 1

我想您想尝试background-size: contain;或background-size: cover;。

Answer 2

当我过去不得不这样做时，我遇到了其他一些考虑因素。所以是的，你可以扩展它来填充，当然。但是你必须考虑图像内容本身以及它如何拉伸它的样子。如果它是一个抽象的图像，它可以很好地拉伸，否则它可能不会很好。

如果您不关心图像失真，可以将HTML和BODY高度设置为100％，然后将CSS背景大小设置为100％auto like this fiddle。

html, body { 
        height: 100%; 
        width: 100%; 
}

body {
        background-image:url('http://columbiascbestnewhomes.com/images/brunson-plan.jpg');
        background-repeat:no-repeat;
        background-size:100% 100%;
        background-position: center;
}

如果图像没有被拉伸，我将使用CSS媒体查询根据检测到的屏幕宽度为每个设备或屏幕类型提供图像。然后动态设置图像并使用我上面提到的背景大小的CSS。

Answer 3

您可以在自己的风格中使用background-size并以百分比形式设置值。像这样：

<style>
    body {
        height: 100%; 
        width: 100%;             
        background-image:url('aa.gif');
        background-repeat:no-repeat;
        background-size:cover;
        background-position: center;
        background-size: 80% 80%;
    }
</style>

Answer 4

我为我的网站登录页面做了类似的事情。以下是我所做的简要概述。让我们知道它是否有帮助。

我发现使用空div而不是做身体会更好一些。

@{
   Random random = new Random();
   int randomNumber = random.Next(0, 5);
   string background = "Images/bg-" + randomNumber + ".jpeg";
}


<div id="background" style="background-image: url('@background');"></div>

的CSS：

html{
   height:100%
   margin:0;
   padding:0;
}
body{
   min-height:100%
   margin:0;
}
#background{
   background-color:#1f212e; 
   background-position:center; 
   background-size:cover;
   position: absolute;
   top:0;
   bottom:0;
   left:0;
   right:0;
}

HTML中身体背景的可缩放图像

4 个答案: