Question

我正在寻找解决困难客户的奇怪问题的方法。该网站使用流体960.gs的变体在Wordpress中构建。所以.container_16是包含的CSS类。让我们说这堂课看起来像这样：

.container_16 {
background: url(http://image.jpg) no-repeat; 
min-width:960px;
min-height:614px;
max-width:1200px;
max-height:800px;
margin-left:auto;
margin-right:auto;
   }

我希望完整的div可以在最大和最小比例大小之间进行缩放。我无法想象我尝试了一些我发现像后台程序的JQuery插件。我正在使用Supersized，它工作得非常好，我无法想出添加最大尺寸或者当它达到最大尺寸时让整个东西居中，这就是为什么我要使用背景div。

任何对此的帮助都非常感激，因为我有一个客户呼吸我的脖子，我是一名设计师，而不是开发人员。谢谢！

以下是我发现似乎有效的代码：

$(function(){  $('.container_16 *').css({'background':'transparent','zIndex':2,'position':'relative'});  
$('.container_16').css({'overflow':'hidden','position':'relative'});  
    var containerWidth = $('.container_16').innerWidth();  
    var bgimgurl = $('.container_16').css('backgroundImage').replace(/url\(|\)|"|'/g,"");  
    var img = $('<img src="'+bgimgurl+'" width="100%" />').css({'position':'absolute','left':0,'top':0,'zIndex':1});  
    $('.container_16').css({'background':'transparent'}).append(img);});

Answer 1

这样的东西？

 $(window).resize(function() {

   var h = $(window).height();
   var w = $(window).width();
   if((h<615) || (w<961)){
   $('#container_16').width(960);
   $('#container_16').height(614);

     }else if((h>799) || (w>1199)){
   $('#container_16').width(1200);
   $('#container_16').height(800);

     }else{
       proportional_w = h/3*2;
      $('#container_16').width(h);
      $('#container_16').height(proportional_w);

     }

  });

不确定我是否正确理解了这个问题，但这会根据浏览器大小重新调整div的大小。我确实使用id而不是class，因为我认为它是页面上唯一的div（根据它的大小来判断）。

好的，我玩过那个超大插件。我认为startwidth和startheight可以用作最大高度和宽度。在css方面，您可以添加他们在deom中的现有样式：

            html{
    width: 100%;
    height: 100%;
    }
    body{
    width: 100%;
    height: 100%;
    }
            #supersize{     
    max-height: 400px;
    max-width: 916px;
    margin: auto;
    position: relative;
    top: 10%;
        }

不确定垂直居中如何在不同尺寸的显示器上工作，但它是水平居中的，我的笔记本电脑也是垂直的。

Answer 2

关于超级化;设置最大宽度和高度打开超大插件附带的supersized.css找到行：

#supersized img { width:auto; 
                  height:auto; 
                  position:relative; 
                  display:none; 
                  outline:none; 
                  border:none; 
                  margin:15%; }

并将其更改为：

#supersized img {
max-width:1800px; /*whatever max width you want*/
max-height:1000px; /*whatever max height you want*/
position:relative;
display:none;
outline:none;
border:none;
}

希望有所帮助。

具有最小和最大约束的可缩放背景图像

2 个答案: