CODEWITHSUNDEEP
htmlcssimagetwitter-bootstrap-3
Sam
Sam

Reputation: 195

image scale proportionally within specified column bootstrap 3

I'm trying to get image fit with bootstrap column in a row proportionally within specified height 300px, i have tried so many ways but unfortunately its not fit with column width (my 1st image dimension is 262*380 and 2nd image dimension 546*380 and im using img-responsive class)

I need my image should be like this Expected

but im getting like this Actual

My HTML

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="grid">
        <img src="https://static5.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lunch-5502ae26.jpg" class="img-responsive" alt="">
      </div>
    </div>
    <div class="col-md-8">
      <div class="grid">
        <img src="https://static7.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lounge-0cd3d802.jpg" class="img-responsive" alt="">
      </div>
    </div>
  </div>

My CSS

.grid {
  height: 300px;
  border-right: 4px;
}

.grid img {
  height: 100%;
}

Upvotes: 0

Views: 1162

Answers (1)

Hemant Kumar
Hemant Kumar

Reputation: 367

Try this HTML:

<div class="container">
  <div class="row">
    <div class="col-md-4 bg-cover grid" style="background-image: url(https://static5.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lunch-5502ae26.jpg)">
    </div>
    <div class="col-md-8 bg-cover grid" style="background-image: url(https://static7.thumbtackstatic.com/_assets/images/release/pages/jobs/submodules/gallery/images/lounge-0cd3d802.jpg)">
    </div>
  </div>
</div>

with this CSS:

.grid {
  height: 300px;
}

.grid img {
  height: 100%;
}
.bg-cover {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 300px
}

Upvotes: 1

Related Questions