cinco/glitch-images
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

remove horizontal scrollbars

Browse Source 
scale down canvas if the image is wider than the browser window
This commit is contained in:
Georg Fischer 2013-09-28 12:57:03 +02:00
parent 5640d7a10b
commit 97c8e633ac
2 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -40,7 +40,9 @@
<button id="save-button" class="button">export image</button> <button id="save-button" class="button">export image</button>
<a id="png-button" download="glitched-image.png" target="_blank" class="download-link">download bitmap file<span> (.png)</span></a> <a id="png-button" download="glitched-image.png" target="_blank" class="download-link">download bitmap file<span> (.png)</span></a>
</div> </div>
<canvas id="canvas"></canvas> <div class="canvas-wrapper">
<canvas id="canvas" />
</div>
<script src="scripts/lib/require-2.1.4.js" data-main="scripts/main"></script> <script src="scripts/lib/require-2.1.4.js" data-main="scripts/main"></script>
</body> </body>
</html> </html>

23
styles/main.css
View File

@ -122,14 +122,6 @@ a:hover
display: none; display: none;
} }
#canvas
{
clear: both;
float: left;
margin-top: 30px;
display: block;
}
.export-wrapper .export-wrapper
{ {
clear: both; clear: both;
@ -156,8 +148,21 @@ a:hover
margin-left: 4px; margin-left: 4px;
} }
.missing-feature .missing-feature
{ {
clear: both; clear: both;
} }
.canvas-wrapper
{
width: 100%;
clear: both;
float: left;
margin-top: 30px;
}
#canvas
{
display: block;
max-width: 100%;
}