Utilizing Bootstrap to display side by side images at full height

Can someone help me achieve the layout shown in the image below? I want a container that spans full width and height with 2 images and other elements inside. The images should be full-height within the container, but also automatically adjust their width to fit (expanding from center to left or right). However, my images are taller than the container, so I need to find a way to constrain them while still filling the full height of the container.

Additional info: All images are in portrait orientation and have the same height. I've looked at similar questions on Stack Overflow, but haven't found a solution. You can view my non-working example here.

If you have any suggestions, please share. Thank you!

htmlcsstwitter-bootstrap

Answer №1

To achieve the desired layout, you can utilize flex properties. Setting 'justify-content' to center will result in your images being centered with equal margins on both sides.

Additionally, if you want the entire div to be covered, consider adding a 50% width to the images.

.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>

Answer №2

Ensure the container-fluid and row have a height of 100% while removing the "img-responsive" class. Additionally, set the images to have a maximum height and width of 100%

Functional code snippet

    <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>

Add the following CSS

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

View a live demonstration here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animating lines with JQuery beneath navigation links

Currently in the process of revamping my portfolio website, and it's still a work in progress. Recently stumbled upon a jquery tutorial that enables a line to animate under anchor elements on hover, which I find quite intriguing. However, I am facing ...

jqueryhtmlcssanchor

Exploring the use of the map function for iterating in a stepper component of

I've been attempting to integrate Redux Form into my stepper component. However, I'm facing an issue where adding form fields results in them being displayed in all three sections. To address this, I started reviewing the code for the stepper. I ...

javascriptcssreactjsreduxmaterial-ui

What is the best way to place text alongside a shape?

I'm attempting to place text beside the circular shape. HTML <div class="row"> <div class="col-sm-2"> <span><div class="circle"></div></span><p>available</p> </div> </div> C ...

htmlcsstwitter-bootstrap-3

Issue with React Js: Text Sphere not appearing on page reload

Currently immersed in a react.js environment and eager to incorporate this impressive animated text sphere. Utilizing the TagCloud package for rendering assistance, however, encountered an issue where the text sphere would only display once and disappear u ...

javascripthtmlcssreactjstag-cloud

What is the best way to transfer weather data from a server to an HTML text area box?

Recently, I delved into the world of expressJS to set up a local server (localhost:3000). With the power of JavaScript (specifically in a file named app.js), I was able to send simple messages like "Hello World" to the browser. However, now I find myself f ...

javascripthtmlexpress

I have expanded the CSSStyleDeclaration prototype, how do I access the 'parent' property?

I have developed some custom methods for CSSStyleDeclaration and implement them like this: A_OBJECT.style.method() ; The code structure is quite simple: CSSStyleDeclaration.prototype.method = function () { x = this.left; ..... etc } Here's my que ...

javascriptcss

Is it possible to simultaneously employ two asynchronous functions while handling two separate .json files?

Is it possible to work with 2 .json files simultaneously? My attempt did not succeed, so I am looking for an alternative method. If you have a suggestion or know the correct syntax to make this work, please share. And most importantly, does the second .j ...

javascripthtmlcssjsonrequest

Conceal the scroll bar within a div set to 100% viewport

Having some difficulty with a scrollbar on my new portfolio. The layout consists of two columns, with content on the left. I need the ability to scroll without displaying the scrollbar. I attempted the code below but it did not work. Could the issue be rel ...

htmlcss

Make sure that the input field and label are aligned side by side in the

Is there a way to arrange the following HTML in the specified layout? <div> <div> <label>Counterparty</label> <input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true" ...

htmlcss

Ways to troubleshoot the CSS padding issue

I've been wrestling with this landing page for the past day and I just can't seem to get the form section right. Take a look at this link! The form at the bottom of the page is all over the place. Below is the CSS snippet that I have been using ...

htmlcssformscss-float

Customizing the color of the thumbs on a Material UI range slider

Hey there, currently working on creating a range slider with 2 values using the material UI slider component. My goal is to customize the two thumbs with different colors. https://i.sstatic.net/BUq12.png Any ideas on how I can achieve this? ...

cssreactjsmaterial-uisliderrangeslider

Combining photos seamlessly and bringing them to life through animation upon window loading

My main goal is to seamlessly fit the images together, but I'm struggling to achieve this. I tried using masonry, but unfortunately it didn't work for me. All I want is to tightly pack the divs together. For instance, in my fiddle example, I woul ...

javascriptjqueryhtmlcss

Transferring data from local storage to a PHP server using AJAX

My attempt to transfer data from local storage to PHP using AJAX resulted in an error mentioning 'undefined index data'. chart.php <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="t ...

javascriptphpjqueryajaxhtml

I am looking to create buttons that can switch between two different styles of a specific element, like an h1 tag, when clicked. However, instead of toggling

//In this HTML document, I am trying to achieve a functionality where my buttons can toggle the style of an h1 element between the colors yellow and purple when clicked. However, I have encountered an issue where the buttons disappear during a transition ...

javascripthtmljquerycss

How to align a div in the center of a cell with Bootstrap

I am currently working with Bootstrap 3 and I have a specific requirement to center a div within a cell in the container row. Most resources I found only mention how to center a div within the entire container, which is not what I am looking for. My goal i ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

When zoomed in, the div background gives off a crisp white appearance

When I zoom in on a div with a background color or border, it appears completely white. Strangely, this issue doesn't happen when I zoom in on the Facebook site. This picture illustrates the problem more clearly. What could be causing this issue? H ...

htmlcssbackground

Ways to include "working hours" if statement a particular holiday dates are specified

Trying to update the code for an "if statement" to include specific dates that are official holidays when the business is not operational. The current code works if the day falls on Mon, Tue, Wed, Thu, or Fri and the time is between 09:00 and 15:00 in a 24 ...

javascriptjqueryhtmlif-statementtypeerror

Adjust column content to fit width, instead of setting width to 100%

To create columns for the ul, I used flex-direction: column and flex-wrap: wrap. When the elements within the ul are split into multiple columns, each column takes on the width of the widest content in that column. However, if there is only one column, it ...

htmlcssflexbox

Encase the entire section following cloning with JQuery

Make sure to check out the jsfiddle demo linked below before proceeding: JSFIDDLE I need to transform the original structure as shown below: <div class="out"> <a>im here</a> <a>to save</a> <a>our</a> ...

javascriptjqueryhtmlcss

Exploring different options for parsing HTML content and extracting text from strings that do not contain HTML/XML tags

When looking at this particular solution for stripping HTML tags from a string, the process involves passing the string to rvest::read_html() in order to generate an html_document object. Subsequently, this object is input into rvest::html_text() to obtai ...

htmlrxmlrvestdata-wrangling