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

问题描述：

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

能否请你解释一下你的 '可扩展' 是什么意思？ –

绝对，@WaisKamal。例如，我可缩放的意思是，如果用户在比原始提供的图像更小或更大的屏幕上打开扩展程序，我们如何确保图像质量得到保留，以及整个图像是否仍然适合浏览器窗口。 – babsndeep

您可以使用图像图层而不是背景进行更好的操作。只需将图层的“z-index”属性设置为最低，并将CSS设置为“width：100％;身高：自动。 –

答

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

答

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

如果不关心图像失真，可以将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; 
}

如果物质DOES该图像不被拉伸我会使用CSS媒体查询具有用于每个设备或屏幕类型，基于检测到的屏幕宽度的图像。然后动态设置图像并使用上面提到的背景大小的CSS。

答

您可以按照您的样式使用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>

答

我为我的登录页面类似我的网站的东西。以下是我所做的简要说明。让我们知道是否有帮助。

我发现它更好地使用空的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中身体背景的可缩放图像

相关推荐