Skip to main content
Participant
September 21, 2015
Question

File Preview Solution for muse ( How do I add in width and height Restrictions?)

  • September 21, 2015
  • 1 reply
  • 556 views

Right so i have this HTML code that I can embed into Muse which is -

<input type="file" accept="image/*" onchange="loadFile(event)">

<img id="output" />

<script>

    var loadFile = function(event) {

        var reader = new FileReader();

        reader.onload = function() {

            var output = document.getElementById('output');

            output.src = reader.result;

        };

        reader.readAsDataURL(event.target.files[0]);

    };

</script>

This code allows me to preview files but how do I add what width and height I want the file to be previewed at? Please help, many thanks!

This topic has been closed for replies.

1 reply

Nancy OShea
Community Expert
Community Expert
September 22, 2015

I imagine you could use CSS to define the height & width of your #output selector.

CSS:

     #output {

     /**adjust numeric values in px as desired**/

          height: xxxpx;

          width: xxxpx;

     }

HTML:

     <img id="output" />

         result comes out here...

     </div>

Nancy O'Shea— Product User & Community Expert
Participant
September 28, 2015

Im adding this code into Adobe Muse which allows you to insert HTML but not CSS, is there any other way about this?

Brad Lawryk
Legend
September 29, 2015

You add the CSS in the page properties in the Meta data section for <head> code.

You would add:

     <style>

     #output {

     /**adjust numeric values in px as desired**/

          height: xxxpx;

          width: xxxpx;

     }

     </style>