CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Pahomi
Pahomi

Reputation: 465

Full height side by side images in bootstrap

I want to obtain the structure exemplified in the image bellow. There will be a full width & height container with 2 images and other elements inside. My images should be full-height(the height of container) and auto-width inside the container(growing from center to left, respectively to the right). My problem is that my images are much higher than container and I need to limit them somehow to be inside the container(red area) also to fill the full height of it. desired structure PS.1 All images are in portrait mode and all of them have same height. PS.2 I had a look at the other questions on Stack. PS.3 You got here my non working example.

Any suggestions are welcome. Thank you!

Upvotes: 0

Views: 1525

Answers (2)

Martin
Martin

Reputation: 83

Set the container-fluid and row to height 100% and remove the class "img-responsive". Also set the images to max-height:100% and max-width:100%

Working code

    <div class="pop-us-container">
      <div class="container-fluid">
        <div class="row">
          <div id="pop-up-1" class="col-sm-6 text-right">
            <img src="http://lorempixel.com/1250/1730/">
          </div>
          <div id="pop-up-2" class="col-sm-6 text-left">
            <img src="http://lorempixel.com/1250/1730/">
          </div>
        </div>
      </div>
    </div>

And CSS add

img {
    max-height:100%;
    max-width:100%;
}
.container-fluid, .row {
    height: 100%;
}

See a working example here.

Upvotes: 0

Chetan Kalra
Chetan Kalra

Reputation: 140

You can define flex for your desired result. 'justify-content' as center will center your images with equal margin on both sides.

PS. Add the 50% width to the images if you want the entire div to be covered.

.container {
  width: 100%;
  background: lightgrey;
  height: 300px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.child {
  display: flex;
  width: 100%;
  justify-content: center;
  height: inherit;
}

#img1,
#img2 {
  height: 100%;
  align-items: stretch;
}
<div class="container">

  <div class="child">

    <img src="https://s-media-cache-ak0.pinimg.com/736x/36/66/76/3666764312573a54adef888747d0c8f3.jpg" id="img1">


    <img src="https://s-media-cache-ak0.pinimg.com/736x/64/07/19/640719d42a8107720d760349fcfbbd52.jpg" id="img2">

  </div>

</div>

Upvotes: 1

Related Questions