背景图像应该是窗口的分辨率

-2

假设我的身体标签具有分辨率为1920 x 1020的背景图像。当我加载我的页面时，我的窗口只有〜800 x 800的大小。我不' t想要加载1920 x 1020分辨率，只有800 x 800我需要显示背景图像。背景图像应该是窗口的分辨率

任何方式来实现这一目标？

<div class="give_me_background_plx"> 

</div> 

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

.give_me_background_plx { 
    background: url("http://placehold.it/1920x1000") center center, 100% 100%; 
    height:100%; 
    width:100%; 
}

编辑：见的jsfiddle。当我打开那个页面时，我不想加载要加载的完整图像，而是一个与窗口大小完全相同的较小版本。就像在img-tag中，我想为该图像设置高度/宽度，这些应该是我的窗口大小。

来源

2015-11-20 ChrisK

请显示您已完成的一些代码。另外，你只是问如何让你的整个图像显示，而不是被窗口裁剪？尝试查看'background-size：contains'或'background-size：cover'。如果这是一个加载问题，那么你需要针对不同的断点（媒体查询）有不同的CSS – ntgCleaner

为了有更多的机会被理解和收回更快的回复，请尝试发布你有问题的代码 – RiccardoC

Nope，saddly not 。我知道如何设置一个完整大小的背景。但我想知道我是否可以裁剪大小，以便较小的设备可以在不使用不同图像的情况下加载较小的图像。 – ChrisK

不幸的是，这是你只能通过Javascript完成的东西（我个人比较喜欢jQuery）。

因为你只需要加载一个形象和不负荷在另一个图像只要窗口变大（如罗伊的回答完成）。

jQuery的将是类似于：

$(document).ready(function() { 
    if ($(window).width() <= 800) { // if the width is equal to, or smaller than 800 px. 
     $("body").css("background","url(image-800.jpg) no-repeat"); // load the small image 
    } else { // if the width is bigger than 800 px 
     $("body").css("background","url(image-1920.jpg) no-repeat"); // load the bigger image. 
    } 
});

JSFiddle demo with your gravatar

注意：要测试演示，你必须用小宽度加载页面，然后用宽度较大的重新加载超过800像素。

来源

2015-11-20 15:12:01

只能用Javascript完成，我不这么认为。您是否在Chrome Devtools中打开了您的网络标签，测试了我的答案？只有一个图像会加载有关您的视口。当您调整到其他图像的大小时，将会加载该图像。不需要Javascript和纯CSS更清洁。 – Roy

确实，它确实加载了其他图像（如果屏幕在某个点变大）。但是OP在你的回答中评论说他想要加载一个图像，所以要么是大图像，要么是小图像，而不是小图像，如果大图像之前已经加载过。这只能用Javascript完成。 –

@ChrisK，这是真的吗？请澄清你的问题。我不能从你的问题得出结论。 – Roy

所以你想加载关于视口的不同图像？使用CSS媒体查询为：

body { 
    background: url(image-1920.png); 
} 

@media(max-width:800px){ 
    body { 
     background: url(image-800.png); 
    } 
}

来源

2015-11-20 15:00:24 Roy

我想加载一个图像，并且该图像应该与窗口大小一致。这可能听起来很愚蠢，因为当我以800 x 800的分辨率加载图像，然后转到全屏时，背景的分辨率会非常糟糕。但那就是我现在想要达到的目标。 – ChrisK

更改你的答案，在媒体查询中添加'body {'，否则你不会更改任何css。 :) –

@Daan Heskes：我接受了你的修改。 – Roy

body标签的CSS每亩100％（宽度：100％），或者您可以使用背景大小属性来设置你的图像的尺寸在背景。

来源

2015-11-20 15:03:36

背景图像应该是窗口的分辨率

回答

相关问题