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 より小さい場合は縮小する必要があり、この 2 つのエッジを非表示にする必要があります!

これを行う方法は？コンテナ div を追加して background-image を設定しようとしましたが、2 つのエッジが異なるため機能しません...アイデアはありますか?

4

2 に答える 2

2

html-canvas を使用して、ロゴとサイド画像のサイズを変更できます

canvas + javascript でリサイズに対応できます。ビューポートが 400px を下回ると、側面の画像を縮小したり、削除したりできます。

たとえば、すべての画像がフルサイズで収まる場合のバナーは次のとおりです。

ここに画像の説明を入力

これは、中央をフルサイズのままで側面の画像を縮小する必要がある場合のバナーです。

ここに画像の説明を入力

側面が削除され、中央のサイズを変更する必要がある場合のバナーは次のとおりです。

ここに画像の説明を入力

ここにコードとフィドルがあります: 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 に答える