Displaying two images side by side in HTML using Bootstrap

Question

Displaying two images side by side in HTML using Bootstrap

As a beginner in HTML, I am faced with the challenge of placing two images of different sizes side by side on the same row using HTML and Bootstrap. Below is my current code:

<div class="row">
  <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6">
    <img src="https://x1" alt="logo"
         id="logo"> 
    </div>
    <div class="col-lg-6 col-md-6 col-xs-6 col-sm-6">
    <img src="https://x2" alt="ex" id="img2">
    </div>
</div>

Although they appear side by side, the images are of different sizes. How can I resize them to fit as two square images next to each other? Here is the CSS affecting the images:

img{
      margin-top:25px;
      width:100%;
}

I would greatly appreciate any help I could get!

jquery html css twitter-bootstrap

Answer 1

Answer №1

Here is a CSS solution for making two elements the same size. Simply set the width to 100% and then assign a fixed height to achieve this effect. Take a look at the example in the link below.

Code Example - https://jsfiddle.net/su16pzqc/

img{
      margin-top:25px;
      width:100%;
      height: 400px;
    }

Answer 2

Here is a CSS solution for making two elements the same size. Simply set the width to 100% and then assign a fixed height to achieve this effect. Take a look at the example in the link below.

Code Example - https://jsfiddle.net/su16pzqc/

img{
      margin-top:25px;
      width:100%;
      height: 400px;
    }

Answer 3

Answer №2

To ensure equal height for elements, consider maintaining the same aspect ratio between their width and height. This way, even if the widths differ, they will at least have uniform heights in a row. Implement the following CSS code to achieve this:

img {
  height:100%;
  width: auto;
}

Keep in mind that the parent element must specify a height for this method to be effective.

Answer 4

To ensure equal height for elements, consider maintaining the same aspect ratio between their width and height. This way, even if the widths differ, they will at least have uniform heights in a row. Implement the following CSS code to achieve this:

img {
  height:100%;
  width: auto;
}

Keep in mind that the parent element must specify a height for this method to be effective.

Answer 5

Answer №3

Check out this JSFiddle demo I created using your code:

https://jsfiddle.net/onjaL3bu/2/

The HTML structure is as follows:

<div class="row">
  <div class="col-xs-6">
    <img src="http://lorempixel.com/400/200" alt="logo" id="logo"> 
  </div>
  <div class="col-xs-6">
    <img src="http://lorempixel.com/600/400" alt="ex" id="img2">
  </div>
</div>

As for CSS, it's minimal at the moment:

img{

}

No need to overcomplicate things with excessive CSS styling for what you're trying to achieve.

Consider simplifying the classes you use in your code - less is often more effective.

Answer 6

Check out this JSFiddle demo I created using your code:

https://jsfiddle.net/onjaL3bu/2/

The HTML structure is as follows:

<div class="row">
  <div class="col-xs-6">
    <img src="http://lorempixel.com/400/200" alt="logo" id="logo"> 
  </div>
  <div class="col-xs-6">
    <img src="http://lorempixel.com/600/400" alt="ex" id="img2">
  </div>
</div>

As for CSS, it's minimal at the moment:

img{

}

No need to overcomplicate things with excessive CSS styling for what you're trying to achieve.

Consider simplifying the classes you use in your code - less is often more effective.

Displaying two images side by side in HTML using Bootstrap

Answer №1

Answer №2

Answer №3

Similar questions

Retrieving binary content from an HTML5 Canvas using base64 encoding (readAsBinaryString)

What is the best way to shorten text in React/CSS or Material UI based on the line height multiples?

How to retrieve the index upon clicking in Javascript

Issue with Angular JS: Unable to remove uploaded files

Switch up the functionality of Bootstrap tooltips: show all the content and only hide it when hovered over

How to design a bell curve using CSS styling

Challenges when implementing tooltip in bootstrap using Angular and TypeScript

Communication between Laravel and controller using AJAX for exchanging information

The userscript will keep the window open as long as it remains inactive

What is the best way to format dates in jQuery AJAX requests?

Inject information into an HTML element

Using jQuery UI to make elements sortable and draggable, while also retrieving the index of the dragged element

Is it possible to modify the font color of a specific MenuItem in material-ui?

Is there a way to shade the entire webpage background in HTML?

Understanding the relationship between controller and view in AngularJS is crucial for building dynamic

Troublesome Suckerfish CSS Navigation Menus failing to function properly on IE7

The function is not defined, even though it is located within the same file

Learn the method to duplicate Outer HTML with the use of jQuery or Pure JavaScript

Having trouble getting CSS Animation to work in a React project?

Transforming nested tables into JSON format