0

我是一个初学者网站建设者:) 我想做以下事情：有一个 400x200 大小的横幅图片，它必须居中。由于宽度较大，左右必须有2条边，最好是拉伸，所以：

s t r e t c h e d i m a g e BANNER s t r e t c h e d i m a g e

st re tc he di ma ge BANNER st re tc he di ma ge

左右图像不同......但这里有一个技巧。居中的IMG是width = 100%，所以当浏览器（iphone）的宽度小于400px时它必须收缩……然后这两条边必须被隐藏！

现在该怎么做？我试图添加一个容器 div 并设置背景图像 - 但它不会工作，因为 2 个边缘是不同的......想法？

4

2 回答 2

2

您可以使用 html-canvas 调整徽标和侧面图像的大小

使用 canvas + javascript，您可以响应调整大小。当您的视口低于 400 像素时，您可以缩小侧面图像并消除它们。

例如，当所有图像都适合全尺寸时，这是您的横幅。

在此处输入图像描述

当侧面图像必须按比例缩小而中心保持全尺寸时，这是您的横幅。

在此处输入图像描述

这是您的横幅，当侧面被移除并且中心必须调整大小时。

在此处输入图像描述

这是代码和小提琴：http: //jsfiddle.net/m1erickson/JewbA/

<!doctype html>
<html lang="en">
<head>

  <style>
      body{ background-color: ivory; }
      #wrapper{ position:relative; }
      canvas{ position:absolute; left:40px; top:5px; border:1px solid red;}
      #amount{ position:absolute; left:1px; top:5px; margin-bottom:15px; width:23px; border:0; color:#f6931f; font-weight:bold; }
      #slider-vertical{ position:absolute; left:5px; top:40px; width:15px; height:225px; border:0px; color:#f6931f; font-weight:bold; }
  </style>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <script>

  $(function() {

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    $( "#slider-vertical" ).slider({
      orientation: "vertical",
      range: "min",
      min: 150,
      max: 800,
      value: 800,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
        resizeAndDraw();
      }
    });

    $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );

      var imgcount=0;
      var left=new Image();
      left.onload=function(){ imgsLoaded(); }
      left.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facebook.png";
      var center=new Image();
      center.onload=function(){ imgsLoaded(); }
      center.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/logo.png";
      var right=new Image();
      right.onload=function(){ imgsLoaded(); }
      right.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/twitter.png";
      function imgsLoaded(){
          if(++imgcount>=3){
              resizeAndDraw();
          }
      }

      var offsetY=10;

      function resizeAndDraw(){

          var width=$("#amount").val();

          canvas.width=width;

          var centerWidth=(width>center.width)?center.width:width;
          var centerHeight=center.height*centerWidth/center.width;
          var centerX=width/2-centerWidth/2;
          var centerY=offsetY;

          var sidesWidth=(width-centerWidth)/2;

          var leftWidth=(sidesWidth>left.width)?left.width:sidesWidth;
          var leftHeight=left.height*leftWidth/left.width;
          var leftX=sidesWidth/2-leftWidth/2;
          var leftY=offsetY+centerHeight/2-leftHeight/2;

          var rightWidth=(sidesWidth>right.width)?right.width:sidesWidth;
          var rightHeight=right.height*rightWidth/right.width;
          var rightX=(width/2+centerWidth/2)+(sidesWidth/2-rightWidth/2);
          var rightY=offsetY+centerHeight/2-rightHeight/2;

          // center
          ctx.drawImage(center,centerX,centerY,centerWidth,centerHeight);

          if(width>400){
              // left
              ctx.drawImage(left,leftX,leftY,leftWidth,leftHeight);
              // right
              ctx.drawImage(right,rightX,rightY,rightWidth,rightHeight);
          }
      }

  });   // end $(function(){});

  </script>
</head>
<body>
    <div id="wrapper">
        <input type="text" id="amount" />
        <div id="slider-vertical"></div>
        <canvas id="canvas" width=300 height=300></canvas>
    </div>
</body>
</html>
于 2013-05-14T01:36:37.540 回答
0

不确定，但可能您可以尝试将 z-index 放在拉伸图像上，这样它就会进入背景。横幅显示在图像上。

z-索引：-1；

于 2013-05-13T20:21:56.470 回答