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!

jqueryhtmlcsstwitter-bootstrap

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

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

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

Adjust the dimensions of the react-dropdown-tree-select element to better fit your needs

Hey there, I'm a beginner web developer currently working on a tree-based dropdown menu. Check out the documentation here To see it live in action, visit the example here I'm trying to adjust the height and width of the "Search/DropDown bar" in ...

cssreactjsreact-dropdown-tree-select

The outcome of jQuery's division and multiplication is not correct

When a user inputs data into the form fields, the other fields should be automatically filled with the calculated values. However, it appears that jQuery is treating the input values as strings instead of numbers, leading to incorrect calculations. I&apos ...

htmljquery

Enhance your li items with prev and next buttons using PHP or jQuery

I am working on a project where I have a list being populated dynamically with PHP. My goal is to include previous and next buttons within each list item. When an item is clicked, it opens a jQuery modal with a specific href value. How can I add this href ...

phpjquerytwitter-bootstrap

What might be the reason behind the failure to implement my color class on the text within the <p> element?

I'm looking to streamline my stylesheet to easily change the color of different text elements. I've created a list of general colors that can be applied using classes, like (class="blue") . Here are some examples: .dark-grey { color: #232323; } ...

htmlcss

alter the property of the vec2 variable

In my vertex shader, I am attempting to alter the attribute vec2 a_position variable that is also used in the fragment shader. This modification is intended to achieve a cylindrical projection of an image. Here is the code snippet from my shaders: <! ...

htmlcanvaswebglprojection

I am having trouble getting my custom CSS file to be applied to my website on Github pages

I attempted to upload a custom CSS file to apply on The raw CSS file is located at: https://raw.githubusercontent.com/themomoravi/SoundOff-Website/master/styles.css I used the following as my href since it directly links to the raw CSS file: href="http ...

htmlcssgithub

Guide to updating 2 iframes simultaneously with a single link/button using HTML and JavaScript

Just joined the community and looking for help on how to refresh two different iframes within a single page. I came across a solution on Google that involves using getElementById. However, I've heard Firefox can be tricky with IDs. Appreciate any as ...

javascripthtmliframerefresh

Ending the jQuery Modal box

Struggling to create a simple modal on my own, and I'm facing some difficulties (probably because I'm more of an expert in jQuery - but let's not dwell on that too much). This is the HTML markup I have: <div id="modal-boxes"> < ...

javascriptjqueryhtmlmodal-dialog

Transferring an array between jQuery and PHP and vice versa

When users select categories from a list of project options, the div below should update to display projects that match those categories. However, despite following instructions from a similar Stack Overflow post on sending arrays with Ajax to PHP scripts, ...

phpjqueryarraysjson

Using CSS Clip Path to conceal elements

My current design uses clip-path for a gradient effect at the top of the page. Ideally, I want the two angles to meet seamlessly without any visual issues. I initially positioned the top so that they touch perfectly and nothing interferes with the angled ...

css

What are the consequences of submitting a form to a different website through POST method?

Dealing with a CMS that does not offer an easy way to add a NodeJS route for handling form data can be quite challenging. I'm considering the following setup - would this be considered bad practice or unsafe? Server 1 (Ghost CMS) : www.domain.com &l ...

javascripthtmlnode.jsexpressghost-blog

Creating text input without borders using HTML and CSS

I have managed to create text inputs without borders using HTML and CSS, but I am facing an issue. Whenever I click on the input field, a yellow border appears instead of the one I removed. It seems like this is coming from the default stylesheets, and I&a ...

htmlcsstextborderless

Is it possible to dynamically pass a component to a generic component in React?

Currently using Angular2+ and in need of passing a content component to a generic modal component. Which Component Should Pass the Content Component? openModal() { // open the modal component const modalRef = this.modalService.open(NgbdModalCompo ...

javascripthtmlangulartypescriptbootstrap-modal

"Ensuring Your SVG Icon is Perfectly Centered: A Step

My SVG icon is currently aligned to the left, but I want to center it. I tried using the following code, but it doesn't seem to be working: .parent{ display: flex; align-items: center; font-size: 13px; } span{ margin-right:10px } When I look at the S ...

htmlcssreactjsflexbox

Unveiling hidden HTML elements with BeautifulSoup: A step-by-step guide

Currently, I am attempting to extract video content from a specific website. Although I can locate the video link using Chrome DevTools, it remains hidden when utilizing BeautifulSoup for extraction. I am hoping for assistance in modifying the code below t ...

pythonhtmlbeautifulsoup

Border for status input like on Facebook

I tried to investigate with Firebug, but struggled to find a solution. How does Facebook wrap the border around the autosize input in the status section? I am particularly curious about the small triangle attached to the border. While using Firebug, I loca ...

htmlcssfacebookinput

Utilize CamelCase in jQuery for Better Code Readability

Upon examining the jQuery source code, I noticed an interesting use of camelcase: camelCase: function( string ) { return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase ); } // where: rmsPrefix = /^-ms-/, rdashAlpha = /-([\da- ...

javascriptjqueryregexunicode

Controller encountering JSON null data

I am currently working on a feature that allows users to send multiple email/SMS messages by selecting checkboxes. However, I am facing an issue where the data is not being passed correctly from my JavaScript function to the action method - all the data sh ...

javascriptjqueryjsonasp.net-mvc

Choosing descendant elements in CSS styling

Is there a way to select child elements in sequence? For instance: <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li> ...

htmlcss

What is the best way to eliminate all frames from the current windows using jQuery?

When transitioning to another page from my center frame, I need to ensure that the top and bottom frames are not visible in the new page. This will prevent my spinner or footer from showing up on the page I'm navigating to. Is it possible to achieve ...

javascriptjqueryhtml