locked
Image Height RRS feed

  • Question

  • User-527908287 posted

    I have three images on my web form, which automatically changes to the other but the image height does not make the images appear well; they are stretched by its width. Please how do I increase the image height to make the images appear well on my web form?

    The sample code is attached below.

    <!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>Joscheck Home</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" />
        <link href="css/StyleSheet.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]-->
          <style type="text/css">
              .navbar{
                  width:100%;
                  !important ;
                  top:0px;
              }
              .footer {
                  width:100%;
                  !important;
              }
              .container2{
                  width:100%;
              }
              .container{
                  width:100%;
              }
    
            .title {
                line-height: 1.33;
                letter-spacing: -.5px;
                margin-bottom: 5px;
                margin-top:0%;
            }
    
            .desc {
                margin-bottom: 50px;
                margin-top: 12px;
                line-height: 1.7;
            }
    
             @media(min-width:992px){
                .col-md-6:not(:first-child) {
                }
                .col-md-6:not(:last-child) {
                    border-right:1px solid #200662;
                    border-left:1px;
                }
    
                .form-horizontal {
                line-height: 1.33;
                letter-spacing: -.5px;
                margin-bottom: 5px;
                margin-top:0%;
            }
            }
        </style>
    
        <script type="text/javascript">
    
            var image1 = new Image('background-size: cover')
    
            image1.src = "images/1.jpg"
    
            var image2 = new Image("background-size: cover")
    
            image2.src = "images/alex-nemo-hanse-gA3YJpTWJSs-unsplash.jpg"
    
            var image3 = new Image("background-size: cover " + "height:100%")
            
            image3.src = "images/QR-lady-small-o.jpg"
    
        </script>
    
    </head>
    <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png'); overflow-x:hidden;">
        <form id="form1" runat="server">
            
                <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #00003D; font-family: Nunito;">
                    <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; font-family:Goudy Old Style;"><span><img alt="logo" src="images/JosCheck ic.jpg" height="30"/></span>JOSCHECK</a>
                        </div>
                        <div class="navbar-collapse collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="Home.aspx" style="color: #FFFFFF">| Home</a></li>
                                <li><a href="#" style="color: #FFFFFF">| About</a></li>
                                <li class="dropdwon">
                                   <a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color: #FFFFFF">| Car<b class="caret"></b></a>
                                    <ul class="dropdown-menu" style="background-color:#00003D;">
                                        <li class="dropdown-header"><a href="VehicleRegistration.aspx" style="color: #FFFFFF; background-color:#00003D;">Register Vehicle</a></li>
                                        <li class="dropdown-header"><a href="Report.aspx" style="color: #FFFFFF; background-color:#00003D;">Report</a></li>
                                        <li class="dropdown-header"><a href="Verification.aspx" style="color: #FFFFFF; background-color:#00003D;">Verify Vehicle</a></li>
                                    </ul>
                                </li>
                                <li class="dropdwon">
                                   <a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color: #FFFFFF">| 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; background-color:##00003D;">Register Phone</a></li>
                                        <li class="dropdown-header"><a href="PhoneReport.aspx" style="color: #FFFFFF; background-color:#00003D;">Report</a></li>
                                        <li class="dropdown-header"><a href="PhoneVerification.aspx" style="color: #FFFFFF; background-color:#00003D;">Phone Check</a></li>
                                    </ul>
                                </li>
                               <li class="dropdwon">
                                   <a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color: #FFFFFF">| QR Code</a>
                                    <ul class="dropdown-menu" style="background-color:#00003D;">
                                        <li class="dropdown-header"><a href="QRGenerate.aspx" style="color: #FFFFFF; background-color:#00003D;">Generate QR Code</a></li>
                                        <li class="dropdown-header"><a href="QRScan.aspx" style="color: #FFFFFF; background-color:#00003D;">Check QR Code</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            
             <div class="container" style="margin-top:3.6%; width:100%; height:470px;background-size: 100% 100%;">
                    <img alt="" class="corner" id="img" src="images/homeimg.jpg" style="height: 470px; width: 100%;" />
                 <div class="col-xs-11" style="margin-top: 0%; color:white;">
                     <h1 style="margin-top:-30%; font-size:large; font-family:AR CENA; text-align:right; margin-right:-2.5%; font-weight:bolder;">Connect with JosCheck to Curb fraud through our eSystem</h1>
                      <p style="margin-top: -0.5%; color:white; font-size:smaller; text-align:right; margin-right:-2%;">Guard against Theft. Register your Car and Phone. Verify with QR Code</p>
                 </div>
                
                <script>
                    var step = 1
                    function slideimages() {
    
                        if (!document.images)
    
                            return
    
                        document.images.img.src = eval("image" + step + ".src")
    
                        if (step < 3)
    
                            step++
    
                        else
    
                            step = 1
    
                        setTimeout("slideimages()", 2500)
                    }
    
                    slideimages()
                </script>
               </div>&nbsp;
        </form>
    </body>
    </html>
    

    Thank you

    -Donald

    Saturday, April 25, 2020 6:04 AM

Answers

  • User-719153870 posted

    Hi Donald416,

    First of all, I think you may have confused the usage of Image() method, please check Image().

    And your slideimages() method is used to change the src value of your current page's <img /> tag with the src value of your custom image1, image2 and image3. So it won't make any difference to set width and height in the Image() object when you create them.

    If you want to change the height of your images, change it in your <img /> tag instead:

    <img alt="" class="corner" id="img" src="images/homeimg.jpg" style="height: 470px; width: 100%;" />

    Here you fixed the height to 470px, so all of your images will show in 470px height, change the height here to 100% or any other value you expected.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, April 25, 2020 6:35 AM
  • User-719153870 posted

    Hi Donald416,

    Sorry for this late reply, I took a vacation before. If you still need advice, please check below information.

    what should I do to make it respond and appear equally<br>
    in width and height when viewed via a mobile phone?

    To set your width equal to height, you will need to set a fix value(please find the suitable value in your situation) for your <img /> Height attribute, then use js to set the width in your function slideimages.

    Please check below demo:

    <!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>Joscheck Home</title>
        <!-- Bootstrap -->
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <%--<link href="css/bootstrap.min.css" rel="stylesheet" />--%>
        <link href="css/StyleSheet.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]-->
          <style type="text/css">
              .navbar{
                  width:100%;
                  !important ;
                  top:0px;
              }
              .footer {
                  width:100%;
                  !important;
              }
              .container2{
                  width:100%;
              }
              .container{
                  width:100%;
              }
    
            .title {
                line-height: 1.33;
                letter-spacing: -.5px;
                margin-bottom: 5px;
                margin-top:0%;
            }
    
            .desc {
                margin-bottom: 50px;
                margin-top: 12px;
                line-height: 1.7;
            }
    
             @media(min-width:992px){
                .col-md-6:not(:first-child) {
                }
                .col-md-6:not(:last-child) {
                    border-right:1px solid #200662;
                    border-left:1px;
                }
    
                .form-horizontal {
                line-height: 1.33;
                letter-spacing: -.5px;
                margin-bottom: 5px;
                margin-top:0%;
            }
            }
        </style>
    
        <script type="text/javascript">
    
            var image1 = new Image(1000,200)
    
            image1.src = "Files/FCF.jpg"
    
            var image2 = new Image("background-size: cover")
    
            image2.src = "Files/CC.jpg"
    
            var image3 = new Image("background-size: cover " + "height:100px;")
            
            image3.src = "Files/FCF2.jpg"
    
        </script>
    
    </head>
    <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png'); overflow-x:hidden;">
        <form id="form1" runat="server">
            
                <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #00003D; font-family: Nunito;">
                    <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; font-family:Goudy Old Style;"><span><img alt="logo" src="images/JosCheck ic.jpg" height="30"/></span>JOSCHECK</a>
                        </div>
                        <div class="navbar-collapse collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="Home.aspx" style="color: #FFFFFF">| Home</a></li>
                                <li><a href="#" style="color: #FFFFFF">| About</a></li>
                                <li class="dropdwon">
                                   <a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color: #FFFFFF">| Car<b class="caret"></b></a>
                                    <ul class="dropdown-menu" style="background-color:#00003D;">
                                        <li class="dropdown-header"><a href="VehicleRegistration.aspx" style="color: #FFFFFF; background-color:#00003D;">Register Vehicle</a></li>
                                        <li class="dropdown-header"><a href="Report.aspx" style="color: #FFFFFF; background-color:#00003D;">Report</a></li>
                                        <li class="dropdown-header"><a href="Verification.aspx" style="color: #FFFFFF; background-color:#00003D;">Verify Vehicle</a></li>
                                    </ul>
                                </li>
                                <li class="dropdwon">
                                   <a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color: #FFFFFF">| 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; background-color:##00003D;">Register Phone</a></li>
                                        <li class="dropdown-header"><a href="PhoneReport.aspx" style="color: #FFFFFF; background-color:#00003D;">Report</a></li>
                                        <li class="dropdown-header"><a href="PhoneVerification.aspx" style="color: #FFFFFF; background-color:#00003D;">Phone Check</a></li>
                                    </ul>
                                </li>
                               <li class="dropdwon">
                                   <a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color: #FFFFFF">| QR Code</a>
                                    <ul class="dropdown-menu" style="background-color:#00003D;">
                                        <li class="dropdown-header"><a href="QRGenerate.aspx" style="color: #FFFFFF; background-color:#00003D;">Generate QR Code</a></li>
                                        <li class="dropdown-header"><a href="QRScan.aspx" style="color: #FFFFFF; background-color:#00003D;">Check QR Code</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            
             <div class="container" style="margin-top:3.6%; width:100%; height:100%;background-size: 100% 100%;">
                    <img alt="" class="corner" id="img" src="Files/CC.jpg"  />
                 <div class="col-xs-11" style="margin-top: 0%; color:white;">
                     <h1 style="margin-top:-30%; font-size:large; font-family:AR CENA; text-align:right; margin-right:-2.5%; font-weight:bolder;">Connect with JosCheck to Curb fraud through our eSystem</h1>
                      <p style="margin-top: -0.5%; color:white; font-size:smaller; text-align:right; margin-right:-2%;">Guard against Theft. Register your Car and Phone. Verify with QR Code</p>
                 </div>
                
                <script>
                    var step = 1;
                    document.getElementById('img').height = 200;
                    setInterval(function slideimages() {
    
                        if (!document.images) {
                            return
                        }
                        else {
                            document.images.img.src = eval("image" + step + ".src");
                            var he = document.getElementById('img').height;
                            document.getElementById('img').width = he;
                        }
    
                        if (step < 3) {
                            step++
                        }
    
                        else {
                            step = 1
                        }
                    },2500)
                </script>
               </div>&nbsp;
        </form>
    </body>
    </html>
    

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 13, 2020 7:40 AM

All replies

  • User-719153870 posted

    Hi Donald416,

    First of all, I think you may have confused the usage of Image() method, please check Image().

    And your slideimages() method is used to change the src value of your current page's <img /> tag with the src value of your custom image1, image2 and image3. So it won't make any difference to set width and height in the Image() object when you create them.

    If you want to change the height of your images, change it in your <img /> tag instead:

    <img alt="" class="corner" id="img" src="images/homeimg.jpg" style="height: 470px; width: 100%;" />

    Here you fixed the height to 470px, so all of your images will show in 470px height, change the height here to 100% or any other value you expected.

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, April 25, 2020 6:35 AM
  • User-527908287 posted

    <br>
    Hi Yang Shen, Thank you very much. I completely forgot about that. I've effected the change and it's worked..but I still have one issue though. In a mobile view, the images appear to be stretched vertically..Please what should I do to make it respond and appear equally<br>
    in width and height when viewed via a mobile phone? I have tried to increase the width and yet it also stretches to horizontally..<br>
    Saturday, April 25, 2020 8:55 AM
  • User-719153870 posted

    Hi Donald416,

    Sorry for this late reply, I took a vacation before. If you still need advice, please check below information.

    what should I do to make it respond and appear equally<br>
    in width and height when viewed via a mobile phone?

    To set your width equal to height, you will need to set a fix value(please find the suitable value in your situation) for your <img /> Height attribute, then use js to set the width in your function slideimages.

    Please check below demo:

    <!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>Joscheck Home</title>
        <!-- Bootstrap -->
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <%--<link href="css/bootstrap.min.css" rel="stylesheet" />--%>
        <link href="css/StyleSheet.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]-->
          <style type="text/css">
              .navbar{
                  width:100%;
                  !important ;
                  top:0px;
              }
              .footer {
                  width:100%;
                  !important;
              }
              .container2{
                  width:100%;
              }
              .container{
                  width:100%;
              }
    
            .title {
                line-height: 1.33;
                letter-spacing: -.5px;
                margin-bottom: 5px;
                margin-top:0%;
            }
    
            .desc {
                margin-bottom: 50px;
                margin-top: 12px;
                line-height: 1.7;
            }
    
             @media(min-width:992px){
                .col-md-6:not(:first-child) {
                }
                .col-md-6:not(:last-child) {
                    border-right:1px solid #200662;
                    border-left:1px;
                }
    
                .form-horizontal {
                line-height: 1.33;
                letter-spacing: -.5px;
                margin-bottom: 5px;
                margin-top:0%;
            }
            }
        </style>
    
        <script type="text/javascript">
    
            var image1 = new Image(1000,200)
    
            image1.src = "Files/FCF.jpg"
    
            var image2 = new Image("background-size: cover")
    
            image2.src = "Files/CC.jpg"
    
            var image3 = new Image("background-size: cover " + "height:100px;")
            
            image3.src = "Files/FCF2.jpg"
    
        </script>
    
    </head>
    <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png'); overflow-x:hidden;">
        <form id="form1" runat="server">
            
                <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #00003D; font-family: Nunito;">
                    <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; font-family:Goudy Old Style;"><span><img alt="logo" src="images/JosCheck ic.jpg" height="30"/></span>JOSCHECK</a>
                        </div>
                        <div class="navbar-collapse collapse">
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="Home.aspx" style="color: #FFFFFF">| Home</a></li>
                                <li><a href="#" style="color: #FFFFFF">| About</a></li>
                                <li class="dropdwon">
                                   <a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color: #FFFFFF">| Car<b class="caret"></b></a>
                                    <ul class="dropdown-menu" style="background-color:#00003D;">
                                        <li class="dropdown-header"><a href="VehicleRegistration.aspx" style="color: #FFFFFF; background-color:#00003D;">Register Vehicle</a></li>
                                        <li class="dropdown-header"><a href="Report.aspx" style="color: #FFFFFF; background-color:#00003D;">Report</a></li>
                                        <li class="dropdown-header"><a href="Verification.aspx" style="color: #FFFFFF; background-color:#00003D;">Verify Vehicle</a></li>
                                    </ul>
                                </li>
                                <li class="dropdwon">
                                   <a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color: #FFFFFF">| 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; background-color:##00003D;">Register Phone</a></li>
                                        <li class="dropdown-header"><a href="PhoneReport.aspx" style="color: #FFFFFF; background-color:#00003D;">Report</a></li>
                                        <li class="dropdown-header"><a href="PhoneVerification.aspx" style="color: #FFFFFF; background-color:#00003D;">Phone Check</a></li>
                                    </ul>
                                </li>
                               <li class="dropdwon">
                                   <a href="#" class="dropdown-toggle" data-toggle="dropdown"style="color: #FFFFFF">| QR Code</a>
                                    <ul class="dropdown-menu" style="background-color:#00003D;">
                                        <li class="dropdown-header"><a href="QRGenerate.aspx" style="color: #FFFFFF; background-color:#00003D;">Generate QR Code</a></li>
                                        <li class="dropdown-header"><a href="QRScan.aspx" style="color: #FFFFFF; background-color:#00003D;">Check QR Code</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            
             <div class="container" style="margin-top:3.6%; width:100%; height:100%;background-size: 100% 100%;">
                    <img alt="" class="corner" id="img" src="Files/CC.jpg"  />
                 <div class="col-xs-11" style="margin-top: 0%; color:white;">
                     <h1 style="margin-top:-30%; font-size:large; font-family:AR CENA; text-align:right; margin-right:-2.5%; font-weight:bolder;">Connect with JosCheck to Curb fraud through our eSystem</h1>
                      <p style="margin-top: -0.5%; color:white; font-size:smaller; text-align:right; margin-right:-2%;">Guard against Theft. Register your Car and Phone. Verify with QR Code</p>
                 </div>
                
                <script>
                    var step = 1;
                    document.getElementById('img').height = 200;
                    setInterval(function slideimages() {
    
                        if (!document.images) {
                            return
                        }
                        else {
                            document.images.img.src = eval("image" + step + ".src");
                            var he = document.getElementById('img').height;
                            document.getElementById('img').width = he;
                        }
    
                        if (step < 3) {
                            step++
                        }
    
                        else {
                            step = 1
                        }
                    },2500)
                </script>
               </div>&nbsp;
        </form>
    </body>
    </html>
    

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 13, 2020 7:40 AM