CSS在横幅旁边添加拉伸边缘答案

【问题标题】：CSS adding stretching edges next to bannerCSS在横幅旁边添加拉伸边缘
【发布时间】：2013-05-14 09:36:37
【问题描述】：

我是初学者网站建设者 :) 我想做以下事情：有一个 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 个边缘不同......想法？

【问题讨论】：

你能做个小提琴吗？
不，我不会做小提琴
我明白了...您有 3 张水平排列的图像。当有足够的空间时，所有 3 张图像都是全尺寸的。当浏览器窗口变窄时，您希望缩小左右图像，但将中心图像保留为全尺寸。当浏览器窗口小于等于 400px 时，左右图像不显示，中间图像缩小。我假设您希望任何图像按比例缩小 - 而不是扭曲。这意味着与中心相比，左/右图像最终将非常小。我做对了吗？如果是这样，html canvas 可以使用 drawImage() 来做到这一点。
是的，我想这样做。

标签： html css html5-canvas

【解决方案1】：

您可以使用 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>

【讨论】：

【解决方案2】：

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

z-index:-1;

【讨论】：

是的，到目前为止一切都很好......但正如我所说，我不能使用背景图片。左右边缘不同
img { 位置：绝对；左：0px；顶部：0px； z-索引：-1； }
是不是不能把左右图拼接成一张图作为背景。只有当横幅宽度小于屏幕时才会出现？？
不，因为两条边不同（左端为绿色，另一端为红色）