CODEWITHSUNDEEP
htmlcss
Romeu Fernandes Bessa
Romeu Fernandes Bessa

Reputation: 85

Image is not respecting the size of the div

I have a div where there is an image inside that div. However I have a problem, that it is not respecting the size of the div, and it is overlapping it.

.bs-col-md-6 {
  box-sizing: border-box;
  -ms-flex-positive: 0;
  flex-grow: 0;
  0;
  */ -ms-flex-negative: 0;
  flex-shrink: 0;
  padding-left: 15px;
  padding-right: 15px;
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}

.bsp-login-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
<div class="bsp-xs-hidden bsp-sm-hidden bs-col-md-6">
  <img class="bsp-login-banner" src="assets/img/Login.jpg" alt="the image is here" />
</div>

enter image description here

Can someone help me?

Upvotes: 0

Views: 1614

Answers (3)

Dev
Dev

Reputation: 13

.bs-col-md-6 {
    box-sizing: border-box;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-left: 15px;
    padding-right: 15px;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }
  
  .bsp-login-banner {
    width: 50%;
    height: 100%;
    object-position: center;
    object-fit: cover;
    z-index: 1;
}
<div class="bsp-xs-hidden bsp-sm-hidden bs-col-md-6">
      <img class="bsp-login-banner" src="assets/img/Login.jpg" alt=""/>
</div>

Upvotes: 0

Shaheen Fazim
Shaheen Fazim

Reputation: 11

You need to give the div some respectful size to handle this according to the image.

The concern with fixed positioning is that it can cause situations where the fixed element overlaps content such that it is inaccessible. The trick is having enough space to avoid that or using relative or absolute positioning instead.

Upvotes: 0

Johannes
Johannes

Reputation: 67778

Don't use position: fixed - this will completely take that element out of the context of all other elements (except the window/viewport).

It's not completely clear what you want, but you can use position:absolute instead and apply position: relativeto its parent to make that the reference element for its position (and to some extent for its size, if defined).

Upvotes: 1

Related Questions