locked
Switching between landscape and portrait mode RRS feed

  • Question

  • User-1994446809 posted

    Please how do I increase the width of image when I switch to landscape mode in my web form? 

    Here is the HTML and javascript to switch between portrait and landscape mode. I want to make width of landscape increased, and the width of portrait will remain same.

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>QR Codes</title>
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/bootstrap.css" rel="stylesheet" />
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet'/>
        <link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet'/>
         <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
         <script type="text/javascript">
            function ImagePreview(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        $('#<%=Image3.ClientID%>').prop('src', e.target.result)
                            .width(390)
                            .height(450);
                    };
                    reader.readAsDataURL(input.files[0]);
                }
            }
        </script>
    </head>
    <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png'); overflow-x:no-display;">
        <form id="form1" runat="server">
        <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #00003D; font-family: 'Comfortaa';">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color: #00003D; border-color: white; border-width: 1px; color: white">
                            <span class="sr-only">Toggle Navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" style="color: white; margin-top: -3%; font-family: 'Nunito';"><span>
                            <img alt="LOGO22" src="images/LOGO22.png" height="40" />&nbsp;</span>JOSCHECK</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="Home.aspx" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">Home</a></li>
                            <li><a href="AcustomID.aspx" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">About</a></li>
                            <li class="dropdwon">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">QR Code <b class="caret"></b></a>
                                <ul class="dropdown-menu" style="background-color: #00003D;">
                                    <li class="dropdown-header"><a href="QRCode.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Generate QR Code</a></li>
                                    <li class="dropdown-header"><a href="QRScan.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Check QR Code</a></li>
                                </ul>
                            </li>
                            <li class="dropdwon">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">Car<b class="caret"></b></a>
                                <ul class="dropdown-menu" style="background-color: #00003D;">
                                    <li class="dropdown-header"><a href="RegisterVehicle.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Register Vehicle</a></li>
                                    <li class="dropdown-header"><a href="Report.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Report Stolen Car</a></li>
                                    <li class="dropdown-header"><a href="Verification.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Verify Vehicle</a></li>
                                </ul>
                            </li>
                            <li class="dropdwon">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">Phone<b class="caret"></b></a>
                                <ul class="dropdown-menu" style="background-color: #00003D;">
                                    <li class="dropdown-header"><a href="PhoneRegistration.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Register Phone</a></li>
                                    <li class="dropdown-header"><a href="PhoneReport.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Report</a></li>
                                    <li class="dropdown-header"><a href="PhoneVerification.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Phone Check</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><asp:Label ID="user" runat="server" Font-Size="smaller" Text="" ForeColor="White"></asp:Label><img alt="" src="images/img1.jpg" height="20" /><b class="caret"></b></a>
                                 <ul class="dropdown-menu" style="background-color: #00003D;">
                                    <li class="dropdown-header"><a href="DashBoard.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Admin Dashboard</a></li>
                                    <li class="dropdown-header"><a href="#" style="color: #FFFFFF; font-size: small; background-color: #00003D;">xxxxx</a></li>
                                 </ul>
                            </li>
                            <li>
                                <a><asp:Label ID="Units" runat="server" Font-Size="smaller" ForeColor="White"></asp:Label></a>
                            </li>
                            <li class="dropdown" style="margin-right: 10px;">
                                <script src="https://js.paystack.co/v1/inline.js"></script>
                                <asp:Button type="button" ID="paybutton" runat="server" class="btn btn-primary navbar-btn" Text="Wallet Deposit" Style="width: 115px; font-size: smaller;" OnClick="paybutton_Click" />
                            </li>
                            <li class="dropdown" style="margin-right: 10px;">
                                <asp:Button ID="btnSignOut" runat="server" class="btn btn-primary navbar-btn" Text="Sign Out" Style="font-size: smaller" OnClick="btnSignOut_Click" />
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
                    &nbsp;&nbsp;&nbsp;
            <br /> <br /><br /><br />
             <div class="container-fluid" style="margin: 0 auto; margin-top: 5%; text-align: justify; margin-left: 2%;">
                  <asp:Label Text="Portrait" runat="server" Style="color: black;" onclick="ChangeOrientation(this)" />
                <asp:FileUpload ID="FileUpload1" runat="server" Height="43px" Width="282px" onchange="ImagePreview(this);" />
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <asp:Label ID="Labelconfirm" runat="server" Font-Size="Large"></asp:Label>
                <div class="row">
                    <asp:Image ID="Image3" runat="server" Width="390px" Height="450" />
                    &nbsp;&nbsp;<asp:Image ID="Image4" runat="server" BorderStyle="None" Width="100" Height="100" />
                </div>
                <br />
                <asp:Button ID="Button1" runat="server" CssClass="btn btn-primary navbar-btn" Text="Generate QR Code" Width="190px" Height="40px" OnClick="Button1_Click" />
                <asp:Button ID="finish" runat="server" Height="40px" CssClass="btn btn-primary navbar-btn" OnClick="finish_Click" Text="Finish" Width="190px" />
                <div><asp:Label ID="lblMessage" runat="server"></asp:Label></div>
            </div>
        </form>
         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript"> function ChangeOrientation(ele) { ele.innerHTML = ele.innerHTML == 'Portrait' ? 'Landscape' : 'Portrait'; var img = document.getElementById('Image3'); var height = img.height; var width = img.width; var dv = document.getElementById('parent'); img.style.height = width + 'px'; img.style.width = height + 'px'; dv.style.height = width + 'px'; dv.style.width = height + 'px'; } </script> </body> </html>

    Sunday, July 5, 2020 1:48 PM

All replies

  • User409696431 posted

    The usual approach is to not think in terms of landscape or portrait, but in terms of the browser width.  Use CSS media queries to adjust image sizes based on browser width, over whatever range of widths the other content on your site supports.

    Monday, July 6, 2020 3:54 AM