CSS - 完全不裁剪的全屏幕背景图像

请不要将此标记为重复，除非您100％确定。CSS - 完全不裁剪的全屏幕背景图像

我需要一个图像作为100％宽度和高度，没有裁剪的背景图像。所以它应该伸展/挤压，但适合屏幕。但是，我无法为此使用img标记，因为这会将图像放在我正在使用的其他背景上，所以我必须使用背景css属性。

下面是我用对CSS的全屏幕的背景图像的教程，这似乎并没有做什么，我需要：CSS tricks

这里是什么是目前存在的一个的jsfiddle：JSfiddle

我相信这是相关的代码，这是一个包含背景图像的li：

.foo { 
    display:block; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 

    background: url("http://i.imgur.com/ZNoJHg1.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

请注意，如果你放大/使呈现面积小，图像显示茶量nges。这是我想要避免的。我愿意使用JavaScript或jQuery来解决这个问题。

来源

2014-03-07 John Doe

你jfiddle是不是有 – helderdarocha

@helderdarocha呀，修正了这一点。 –

不'背景大小：100％;'解决你的问题？ – helderdarocha

<!DOCTYPE html> 
<html> 
<head> 
<style> 
* { 
    padding: 0; 
    margin: 0; 
} 
.fit { 
    max-width: 100%; 
    max-height: 100%; 
} 
.center { 
    display: block; 
    margin: auto; 
} 
</style> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" language="JavaScript"> 
function set_body_height() { 
    var wh = $(window).height(); 
    $('body').height(wh); // body height = window height 
} 
$(document).ready(function() { 
    set_body_height(); 
    $(window).bind('resize', function() { set_body_height(); }); 
}); 
</script> 
</head> 
<body> 
<img id="the_pic" class="center fit" src="http://i.imgur.com/ZNoJHg1.jpg" >  
</body> 
</html>

试这个一个..似乎你的问题重复BTW

来源

2014-03-07 02:54:38 airi

不是，图像在调整大小时仍会裁剪。 –

可以让它变大一些，从右到左调整它在那个小提琴上 – airi

现在这正是我正在寻找的东西，谢谢！ –

-2

这个解决方案取决于使用图像标签不background属性，它不覆盖其它图像

CSS

  html,body{height: 100%;} 
      body{ 
       margin: 0; 
       position: relative; 
       padding:0; 


      } 
      .background{ 
       position: absolute; 
       top: 0; 
       left:0; 
       z-index: 0; 
      } 
      .page-container 
      { 
       min-height: 100%; 
       position: relative; 
       z-index: 1; 
      }

HTML

<img class="background" src="http://i.imgur.com/ZNoJHg1.jpg" width="100%" height="100%" /> 
<div class="page-container"> 
    <img src="http://i.imgur.com/ZNoJHg1.jpg" width="500" height="500" />  
</div>

来源

2014-03-07 02:44:04 Reda

从我的帖子：“我无法使用img标签，因为这将图像放在我正在使用的其他背景上，所以我必须使用背景CSS属性“。 –

你可以使用几个背景图像标签与不同的z-index值 – Reda

我试过这个。即使将img标签设置为z-index -999，也不会将它们放在背景颜色和其他背景图像之后。 –

-1

添加background-size:100%;

或改变你的背景CSS像下面

background :url("http://i.imgur.com/ZNoJHg1.jpg") no-repeat fixed center center/100% auto rgba(0, 0, 0, 0)

希望它会解决你的问题

来源

2014-03-07 03:16:45 Sarath

CSS - 完全不裁剪的全屏幕背景图像

回答

相关问题