making increasing from left and right side of page in bootstrap page

Question

I am newbie in bootstrap and front design. I want to make a page in MVC and CSS and bootstrap, a template like the following

So I want the page be resized from the left and right side of this picture, not by whole part of the image .

This Code doesn't make what I want, when browser size increased it increases the frame with shadow.

.page-account-box .picture-box {
  width: 100%;
  padding: 0;
}

.page-account-box .picture-box .imgFormat {
  -moz-box-shadow: 10px 10px 5px #ccc;
  -webkit-box-shadow: 10px 10px 5px #ccc;
  box-shadow: 10px 10px 5px #ccc;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  position: relative;
  top: 50px;
  left: 150px;
  background-color: darkgoldenrod;
}

.page-account-box {
  width: 100%;
  height: auto;
  padding: 0;
  border: 1px solid #e2efef;
  -webkit-box-shadow: 0 12px 12px 0 hsla(0, 0%, 70.6%, .11);
  box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
  position: relative;
  margin: 50px auto 30px;
  background-color: aqua;
  border-radius: 20px;
}

.page-account-box .ds-userlogin {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 10px auto 10px;
  background-color: blueviolet;
}

.page-account-box .ds-userlogin .account-box .Login-to-account .account-box-content {
  min-height: 100%;
  text-align: center;
  border-radius: 20px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="page-account-box">
      <div class="col-lg-1 col-md-1 col-xs-6  ">
        <div class="picture-box">
          <img src="https://via.placeholder.com/600" class="imgFormat" />
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-xs-8 mx-auto">
        <div class="ds-userlogin">
          <div class="account-box">
            <div class="Login-to-account mt-4">
              <div class="account-box-content">

                <form method="post" class="form-account text-right">
                  <div class="form-account-title">
                    <label for="email-phone">Name</label>
                    <input type="text" class="number-email-input" id="FullName">
                  </div>
                  <div class="form-account-title">
                    <label for="email-phone">Email</label>
                    <input type="email" class="number-email-input" id="Email">
                  </div>
                  <div class="form-account-title">
                    <label for="password">password</label>
                    <input type="password" class="password-input" id="Password">
                  </div>


                  <div class="form-row-account">
                    <a onclick="Registeruser()" class="btn btn-primary btn-register">ثبت </a>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

You'll want to use the img-fluid class on your image to prevent it from being larger than the container, and you'll want to position and size the container instead of the image, along with the outer elements. Notice overflow-hidden, which forces containment, and max-width, which accommodates your left position. That might be better handled with padding on the container.

.page .account-box {
  max-width: calc(100% - 150px);
}

.page-account-box .picture-box {
  width: 100%;
  padding: 0;
}

.page-account-box .picture-box {
  box-shadow: 10px 10px 5px #ccc;
  border-radius: 25px;
  position: relative;
  top: 50px;
  left: 150px;
  max-width: calc(100% - 150px);
  background-color: darkgoldenrod;
}

.page-account-box {
  border: 1px solid #e2efef;
  box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
  position: relative;
  margin: 50px auto 30px;
  background-color: aqua;
  border-radius: 20px;
}

.page-account-box .ds-userlogin {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 10px auto 10px;
  background-color: blueviolet;
}

.page-account-box .ds-userlogin .account-box .Login-to-account .account-box-content {
  min-height: 100%;
  text-align: center;
  border-radius: 20px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="page-account-box">
      <div class="col-lg-1 col-md-1 col-xs-6 overflow-hidden">
        <div class="picture-box">
          <img src="https://via.placeholder.com/600" class="img-fluid" />
        </div>
      </div>
      <div class="col-lg-4 col-md-4 col-xs-8 mx-auto">
        <div class="ds-userlogin">
          <div class="account-box">
            <div class="Login-to-account mt-4">
              <div class="account-box-content">

                <form method="post" class="form-account text-right">
                  <div class="form-account-title">
                    <label for="email-phone">Name</label>
                    <input type="text" class="number-email-input" id="FullName">
                  </div>
                  <div class="form-account-title">
                    <label for="email-phone">Email</label>
                    <input type="email" class="number-email-input" id="Email">
                  </div>
                  <div class="form-account-title">
                    <label for="password">password</label>
                    <input type="password" class="password-input" id="Password">
                  </div>


                  <div class="form-row-account">
                    <a onclick="Registeruser()" class="btn btn-primary btn-register">??? </a>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>