CODEWITHSUNDEEP
angularhtmlcss
Thanveer Shah
Thanveer Shah

Reputation: 3323

How to make the image stay inside the container without being overflowed

The image inside the container is being overflowed even after giving overflow:hidden to the container .

This doesn't happen at all and this shouldn't happen after giving overflow:hidden, But it still bugs out for some reason

Any help would be appreciated.

Image

enter image description here

HTML:

<div class="row">
    <div class="col-xl-3 col-lg-3 col-md-6" *ngFor="let images of brandImages">
      <div class="brands">
        <img src="{{ images }}" alt="" />
      </div>
    </div>
  </div>

CSS

.brands {
  margin-top: 18px;
  border: 1px solid silver;
  height: 200px;
  margin-bottom: 25px;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Upvotes: 1

Views: 2101

Answers (3)

lemek
lemek

Reputation: 798

I've tried to recreated your problem: CodeSandbox Everything seems to work as intended, so i think it might be browser related. Does this problem occurs on every browser? Have you scaled your page (zoom)?

Upvotes: 1

Hamza Arab
Hamza Arab

Reputation: 152

Give your img max-width:100%; and height:auto; or if you're using bootstrap give it a class of img-responsive or img-fluid depending on your version.

Upvotes: 0

Avrik
Avrik

Reputation: 1

.brands 
{
...
clip-path: rectangle(0, 0, 100%, 200px);
}

Upvotes: 0

Related Questions