Question 43727 in Html Question posted in
Some basic documentation can be found here.

Unable to crop image with flexbox – Html

I have an image sized exactly, but I can’t get it to crop vertically. I end up with empty white space with image overflow, or the flexbox extends itself to the image extents. How can I resolve this so the image will crop to match the height of the rest of my elements in a responsive way?

enter image description here

The white box is the area I would like to remove so that the image gets cropped to match the other elements without scaling the image. However I can’t figure out how to achieve this. (assuming I can with vanilla CSS)

body {
  max-width: 100vw;
  max-height: 100vh;
  font-family: var(--fontStyleStandard);
}

.mainContainer {
  display: flex;
  flex-direction: row;
  justify-content: left;
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: var(--mainBgColor);
}

.formContainer {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  align-items: flex-start;
  flex-direction: column;
}

.innerContainer {
  display: flex;
  width: auto;
  height: auto;
  background-color: var(--modulecolor1);
  position: relative;
  align-items: flex-start;
  flex-direction: column;
}

.bodyContainer {
  display: inherit;
  flex-direction: column;
  justify-content: space-between;
  margin: 0px;
  padding: 0px;
  width: auto;
  height: auto;
}

.fieldContainer {
  padding: 0 0 0 3rem;
  background-color: var(--modulecolor1);
  position: relative;
  box-shadow: 5px 2px 5px rgb(24, 12, 27);
  width: 100%;
}

.leftBanner.fixed {
  display: flex;
  /* background:border-box no-repeat left / contain fixed url("../img/sideImage2.png"); */
  /* max-height: 100vh; */
  max-height: 100%;
  width: 400px;
  margin: 0;
  padding: 0;
  object-fit: cover;
  object-position: top left;
}

.leftBanner>img {
  display: inherit;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 45%;
  min-height: 45%;
}

.formHeading {
  background-color: var(--modulecolor2);
}
<!-- Add your site or application content here -->
<div class="mainContainer">
  <div class="leftBanner fixed">
    <img src="./img/sideImage2.png" alt="">
  </div>
  <div class="bodyContainer">
    <div class="formContainer">
      <h4 class="formHeading fontstyle1"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, totamimpeditcupiditate cumque atque aperiam delectus mollitia rem error incidunt consequuntur reiciendis asperiores id eveniet. In nemo alias debitis unde?</h4>

      <div class="buttonContainer"><button class="styled" form="signUp" type="submit">Create Account</button>
        <div>Already Have an account? <a href="">Log in</a></div>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    There are two ways to achieve this cropping,
    First, you could set the height of your .leftBanner to be the same as your .bodyContainer This is fine, though it will not be as responsive, and I also imagine your .bodyContainer will have more content in it, thus removing the set crop.
    Instead I’d do the following

    body {
  max-width: 100vw;
  max-height: 100vh;
  font-family: var(--fontStyleStandard);
}

.mainContainer {
  background-color: var(--mainBgColor);
  background-color: red;
  display: flex;
  flex-direction: row;
  justify-content: left;
  width: 100vw;
  height: 100vh;
  margin: 0;
}
.bodyContainer {
  display: inherit;
  justify-content: space-between;
  margin: 0px;
  padding: 0px;
  width: auto;
}
.formContainer {
  /*Change the FormContainer to a flexbox and set to your intended Height/Max-Height */
  display: flex;
  /*This will be a flex Row  */
  flex-direction: row;
  height:fit-content;
  max-height: 400px;
  width: 100%;
  margin: 0;
  background-color: blue;
  padding: 0;
  align-items: flex-start;
}

.form{
  background-color:green;
  height:fit-content;
}
.leftBanner.fixed {
  /*set this image Height to 100%  filling the intended height of the formContainer give it a min-height so it will always have a size*/
  height:100%;
  min-height:200px;
  background: border-box no-repeat left / contain fixed 
    url("https://media.istockphoto.com/id/1167895713/photo/abstract-galaxy-watercolor-backgrounds.jpg?b=1&s=170667a&w=0&k=20&c=ivNkiy9Bq_CMEAEoGrDNQuilHll53fhAn-BKTgB9dqU=");
  background-color: green;
  display: flex;
  width: 400px;
}

.leftBanner > img {
  display: inherit;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 45%;
  min-height: 45%;
}

.formHeading {
  background-color: var(--modulecolor2);
}
    <body>
  <div class="mainContainer">
    <div class="bodyContainer">
      <div class="formContainer">
    <!--Place the Banner inside the form this will restrict its max height to the height of the form-->
        <div class="leftBanner fixed">
          <img src="./img/sideImage2.png" alt="">
        </div>
        <div class='form'>
          <h4 class="formHeading fontstyle1"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, totamimpeditcupiditate cumque atque aperiam delectus mollitia rem error incidunt consequuntur reiciendis asperiores id eveniet. In nemo alias debitis unde?</h4>

          <div class="buttonContainer"><button class="styled" form="signUp" type="submit">Create Account</button>
            <div>Already Have an account? <a href="">Log in</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

    By Placing your banner image inside the form, it’s max-height will always be the height of the form. Thus cropping it to the correct height.

    This becomes problematic with using the background-image setting of the .leftBanner because background-images do not have set heights, so you will need to input a height/min-height to that class in order for it to register as an active div with dimensions. Or use the <img></img> to set your background image, and give it an object-fit:cover

    The above solution will work, so long as you don’t mind setting a min-height to the form.

    Login or Signup to reply.
  2. 0

    A simple construct with position: absolute; and overflow: hidden; should do the task, if I understood what you’re trying to do correctly. It’s absolutely responsive:

    .mainContainer{
  display: flex;
  justify-content: left;
}

.leftBanner.fixed {
  width: 200px;
  position: relative;
  overflow: hidden;
}

.leftBanner img{
  position: absolute;
  width: 100%;
}

    cropped responsive giraffe

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search