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

问题描述

| 我正在寻找解决困难客户的奇怪问题的解决方案。该站点是在Wordpress中使用液体960.gs的变化构建的。因此.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插件，例如backstretcher。我使用的是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);});

    

解决方法

        像这样吗

 $(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%;
        }

虽然不确定在不同尺寸的显示器上如何进行垂直居中，但是水平居中，并且在笔记本电脑上垂直居中也不错。     ,        关于超大型；要设置最大宽度和高度，请打开“超大插件”随附的“ 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;
}

希望能有所帮助。