Image cannot be resized-CodePudding

I have an image within a container that needs to be down scaled. When rendered out the full source code is as below.

/*STAFF LOGIN*/

#myMainContainer {
  border: 10px solid red;
}

#logoStaffLoginPage {
  width: 50%;
  height: auto;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap css-->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href=/static/main.css>
  <link rel="stylesheet" href=/static/style.css>
  <link rel="shortcut icon" type="image/png" href="/static/media/favicon.png" />
  <title></title>

  <!--font-awesome including icon for shopping cart-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!--Font awesome-->
  <script src="https://kit.fontawesome.com/efc09bd617.js" crossorigin="anonymous"></script>

  <!--Google recaptcha-->
  <script src="https://www.google.com/recaptcha/enterprise.js?render=6LdNCXEhAAAAAHy7vvB9oqTF8zSfVrGDIfr-82Re"></script>


  <!--Google analytics-->
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-20BMMNWM05"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'G-20BMMNWM05');
  </script>
</head>

<body>

  <div  id="myMainContainer">
    <div >
      <div >
        <img src="/media/logoWithText.png" alt="Logo" id="logoStaffLoginPage">
      </div>
    </div>

    <div >
      <div >
        Staff Login
      </div>
    </div>
  </div>

  <div >
    <form method="post" action="/accounts/login/">
      <input type="hidden" name="csrfmiddlewaretoken" value="V3d7Hqf3vYG8whYv6xF7yU0Cak3dKk21xn7U6X6dxCXEPdHAWd9URA8Sc69YRlOy">
      <label for="id_username">Username:</label>
      <br>
      <input  type="text" name="username" autofocus autocapitalize="none" autocomplete="username" maxlength="150" required id="id_username">
      <br><br>
      <label for="id_password">Password:</label>
      <br>
      <input  type="password" name="password" autocomplete="current-password" required id="id_password">
      <br>
      <br>
      <button type="submit" >Login</button>
    </form>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

</body>

</html>

I have tried with max-width and max-height in css and none of them seem to work. Also I have tried to put the img out of the container, and even outside it does not scale properly. Also I have tried clear the cookies, and still I am unable to scale down the image.

Below is a screen dump of the page, and I want to down scale the logo image.

CodePudding user response：

There seem to be jquery file missing. jquery can help to support with the responsive website design need which allow you to set the size condition of your file based on the window size limitation.

CodePudding user response：

Well, you can try changing the size of parent container. and use object fit property for logo. The logo image inside will scale itself according to it. Reference: https://www.delftstack.com/howto/css/resize-image-css/#:~:text=Use the object-fit Property to Resize the Image in CSS,-We can use&text=We can specify the way,given dimension of the container.

parent-div{
height:200px;
width:300px;
}
image{
height:100%;
width:100%;
object-fit:contain;
}

CodePudding user response：

I figured it out. I was edit the wrong css file.