Question

我正在创建一个完整尺寸的照片幻灯片，我不想使用图像，因为它们更容易复制，所以我使用带有背景网址的div，但是我无法让这些符合所有屏幕分辨率。当然，屏幕越小，照片放大的程度就越大。我在下面发布了我的代码。

<!DOCTYPE html>
<head>

<style>

html,body{
height:100%;
overflow-y:hidden;
margin:0px; padding:0px;
}

.bxslider { 
position:absolute; 
background:red; 
height:1000px; 
overflow-y: scroll; 
margin:0; padding:0;
}

.red {     
background:red url(http://chefpaulcrowe.com/img/background-example.jpg) no-repeat center     center; width:100%; height:100%; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
}
.green {     
background:green url(http://chefpaulcrowe.com/img/background-example.jpg) no-repeat center center;  width:100%; height:100%; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
}
.blue {     
background:blue url(http://chefpaulcrowe.com/img/background-example.jpg) no-repeat center center; width:100%; height:100%; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
}

#bx-pager-wrapper { width:100%;  background:black; position:absolute; bottom:0; padding:30px 0 30px 0; }
#bx-pager { position:relative; float:right; margin-right:100px; }
#bx-pager img { padding:0 30px 0 0; }

</style>

<script src="http://bxslider.com/js/jquery.min.js"></script>

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script src="http://bxslider.com/js/scripts.js"></script>

<script type="text/javascript">

  var _gaq = _gaq || [];
 _gaq.push(['_setAccount', 'UA-36499930-1']);
 _gaq.push(['_trackPageview']);

(function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-    analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

</head>

<body>

<script type="text/javascript">
  $(document).ready(function(){

$('.bxslider').bxSlider({
  pagerCustom: '#bx-pager'
});
  });
</script>


<ul class="bxslider">
  <li class="red"></li>
  <li class="green"></li>
  <li class="blue"></li>
</ul>


<div id="bx-pager-wrapper">
  <div id="bx-pager">
    <a data-slide-index="0" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
    <a data-slide-index="1" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
    <a data-slide-index="2" href=""><img src="http://bxslider.com/images/thumbs/tree_root.jpg" /></a>
  </div>

</body>

</html>

Answer 1

尝试给bxslider提供100％的宽度，并为bg size提供相同的宽度

http://jsfiddle.net/vuB64/

.bxslider { 
position:absolute; 
background:red; 
height:1000px;
    width:100%;
overflow-y: scroll; 
margin:0; padding:0;
}

.red {     
background:red url(http://chefpaulcrowe.com/img/background-example.jpg) no-repeat center     center; width:100%; height:100%; 
-webkit-background-size: 100%;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%; 
}

Answer 2

我强烈建议不要这样做。

这限制了您，并且不保护您的图像。我可以检查你的CSS，复制你网站上的路径，然后仍然可以访问图像。如果您使用IMG标签（我推荐的方式），您可以使用javascript右键单击您的网站，这将有助于保护您的图像。你可以这样做：

How do I disable right click on my web page?

如果你坚持这样做（错误的方式），就在这里。

有了一个画廊，你不需要封面。在iPhone的屏幕尺寸上，一半的图像将被切断，因为默认情况下，封面会确保图像覆盖整个视口，并保持图像比例。

我想你想要的是这个：

.red {
    background: red url(images/background.png) no-repeat;
    background-size: 100% center;
}

如果图像太高并且会留下显示的背景颜色（红色），这仍然会切断一些图像，图像不够高，无论您的浏览器的宽度是多少，都不能填满屏幕。

完全确保您的图片永远不会超出浏览器视口的高度或宽度的唯一方法是这样做：

<ul class="bxslider">
    <li class="photo"><img src="image1.png"/></li>
    <li class="photo"><img src="image2.png"/></li>
    <li class="photo"><img src="image3.png"/></li>  
</ul>

而css将是：

.photo {
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%;
}

.photo img {
    width: 100%;
}

做任何你想做的事，但你不能在背景图像上有最大宽度或最大高度，所以唯一的方法是确保你不要切断你的图像，这是我建议的第二种方式，然后只需禁用右键单击或以其他方式保护您的图像。

免责声明：无论如何都会保护您的图像 - 如果您希望它们受到保护那么糟糕，请在它们上面留下水印。

将图像放在那里作为背景图像是可怕的语义。

使所有屏幕尺寸都适合

2 个答案: