i'm wanting restrict displayed size of image selected user, not having luck css, doing wrong?
the user can select image, , being displayed, showing full size of image in cases extends far beyond viewable area of web page.
<div id="wrapper"> <input id="fileupload" type="file" /> <br /> <div id="image-holder" style="width:100%;max-width:50px;height:auto;border:4px solid"></div> </div> @styles.render("~/content/css/") @scripts.render("~/bundles/jquery") <script type='text/javascript'> $(document).ready(function () { $("#fileupload").on('change', function () { if (typeof (filereader) != "undefined") { var image_holder = $("#image-holder"); image_holder.empty(); var reader = new filereader(); reader.onload = function (e) { $("<img />", { "src": e.target.result, "class": "thumb-image" }).appendto(image_holder); } image_holder.show(); reader.readasdataurl($(this)[0].files[0]); } else { alert("this browser not support filereader."); } }); }); </script>
add max-width: 100%
img
if want constrained width of parent.
<div style="max-width: 50px"> <img style="max-width: 100%" src="http://kenwheeler.github.io/slick/img/fonz1.png"> </div>
Comments
Post a Comment