Question

我是一个初学者网站建设者:)我想做以下事情：有一个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宽度= 100％，因此当浏览器（iphone）的宽度小于400px时它必须缩小...然后必须隐藏这两条边！

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

Answer 1

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

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

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

enter image description here

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

enter image description here

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

enter image description here

这是代码和小提琴：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>

Answer 2

不确定，但可能您可以尝试将z-index放入stretchimage，因此它会转到后台。横幅显示在图像上。

的z-index：-1;

CSS在横幅旁边添加拉伸边

2 个答案: