I have a card control on my page, with image control inside of it.
When I upload a portrait image or landscape image the display is not what I expected. The landscape image skips out from the card control, but the portrait image shows its fill width and height inside the card control. How can I make both image types (Landscape and portrait) to show inside the card and not skip over the card control? Or is card control the right control to use in this kind of situation?
I just want it that regardless of image mode a user uploads, be it in landscape mode or portrait mode, they will sit inside their parent control. Kind of like a flexible container
<head runat="server">
<link href="css/bootstrap.min.css" rel="stylesheet" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" media="all" />
<title></title>
<style type="text/css">
#imgFileUpload {
cursor: pointer;
position: relative;
border-radius: 20px;
}
#parent {
position: relative;
width: auto;
height: auto;
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<div class="row col-sm-11" style="width: 100%; margin: 0 auto; padding: 6px;">
<div class="col-sm-6">
<div class="card" style="width: 100%; border-radius: 3px;position: absolute;">
<div class="card-body">
<div id="parent" style="margin: 0 auto; margin-top: 0%; position: center;">
<asp:FileUpload ID="fuUpload" runat="server" Style="display: none" />
<asp:Image ID="imgFileUpload" ImageUrl="Test.png" runat="server" />
</div>
</div>
</div>
</div>
<div cass="col-sm-6">
</div>
</div>
</div>
</form>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(function () {
var fileUpload = $("[id*=fuUpload]");
var img = $("[id*=imgFileUpload]");
img.click(function () { fileUpload.click(); });
fileUpload.change(function () {
var reader = new FileReader();
reader.onload = function (e) {
$("[id*=imgFileUpload]").attr("src", e.target.result);
}
reader.readAsDataURL($(this)[0].files[0]);
});
});
</script>
</body>
