html - CSS adding stretching edges next to banner -
im beginner sitebuilder :) want following: there 400x200 sized banner image, must put centered. width bigger, there must 2 edges left , right, preferably stretching, so:
s t r e t c h e d m g e banner s t r e t c h e d m g e st re tc di ma ge banner st re tc di ma ge the left , right images different... here comes trick. centered img width = 100%, must shrink when the width of browser (iphone) smaller 400px... , 2 edges must hidden!
now how this? tried add container div , set background-image - wont work, 2 edges different... ideas?
you can use html-canvas resize logo , side images
with canvas + javascript can respond resizing. can scale down side images eliminate them viewport goes below 400px.
for example, here banner when images fit full-sized.
here banner when side images must scaled down center remaining full-sized.
and here banner when sides removed , center must resized.
here code , fiddle: 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>
Comments
Post a Comment