I'm having trouble restricting the size of the user-selected image with CSS. Can someone point me in the right direction?
Currently, when a user selects an image, it is displayed at full size which sometimes extends beyond the visible area of the 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 does not support FileReader.");
}
});
});
</script>