Resize the images and align them side by side

I have a container with a maximum width of 1400px. Inside this container, there are two images of different sizes. I want to align them in a row using flexbox so that they fit within the 1400px width and still maintain a visually appealing appearance as shown in the image (red border indicates the div with a max-width of 1400px). How can I achieve this? I hope my explanation is clear.

.container {
  display: flex;
  max-width: 1400px;
  margin: 0 auto;
  border: 1px solid black;
}

img {
  width: 100%;
  display: block;
}
<div class="container">
  <img src="https://dummyimage.com/hd1080">
  <img src="https://dummyimage.com/vga">
</div>

htmlcssflexbox

Answer №1

To create a layout where one image is larger than the other, you can wrap the images inside a div and adjust the flex property as shown below:

.container {
  display: flex;
  max-width: 1200px;
  width:100%;
  margin: 0 auto;
  border: 1px solid blue;
}
.large-image {
  height:400px;
  flex:2;
  position:relative;
  border:1px solid #333;
}
.small-image {
  height:300px;
  flex:1;
  position:relative;
  border:1px solid #333;
}

img {
  position:relative;
  height:100%;
  width:100%;
}
<div class="container">
  <div class="large-image">
    <img src="https://example.com/largeimage.jpg">
  </div>
  <div class="small-image">
    <img src="https://example.com/smallimage.jpg">
  </div>
</div>

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

Reading settings from web.config file in an HTML page

Currently working with ASP.NET 3.5 web forms. I've recently saved the path of my website in the web.config file under the key "CommonPath". I have a basic static HTML page that I would like to utilize this key on. Any suggestions on how to achieve ...

asp.nethtmlweb-config

Interval function not initiating properly post bullet navigation activation

Currently, I am experiencing an issue with my custom slider where the auto sliding set interval function is not working after using the bullet navigation. Despite trying to implement "setTimeout(autoSlide, 1000);", it doesn't seem to be resolving the ...

javascriptjqueryhtmlcss

Using local storage with github sites can lead to some unexpected and peculiar behavior

Currently, I am working on a simple clicker game using HTML and JavaScript. To store the variables money and taxCollecters, I have implemented local storage. However, I am encountering strange issues when trying to use the save and load buttons on the Gi ...

javascripthtml

Toggle the font weight in a text area by clicking a button

I need help with creating a button that will change the font-weight to bold when clicked and then revert back to normal when un-clicked. However, I only want the specific part of the text area where the user clicks the button to be bolded, not the entire t ...

javascriptjqueryhtmltoggleclass

Tips to prevent the webpage from scrolling to the top when clicking on an anchor with an ID

I have developed a CSS/HTML carousel that consists of 4 slides. The goal is to display the selected slide when clicking on the bottom button (a href). However, I am facing an issue where every time I click on a link, the selected slide appears as intended ...

javascripthtmljquerycss

When I click the submit button in HTML PHP, the text in the text field disappears. How can I make sure the text stays

I am facing an issue with the functionality of my form's submit button. When I click the button, the text in the text field disappears, but I need it to remain for another button that requires it. These two buttons are part of different functions, and ...

phphtmlbuttonsubmittextfield

Html content overlapping div rather than being stacked vertically

My goal is to arrange a group of divs inside another div in a vertical stack. However, I am facing an issue where the text from the last div is overlapping with the second div instead of following a proper vertical alignment where the text in the third div ...

javascripthtmlcss

positioning of multiple buttons in a customized header for mui-datatables

I'm currently using mui-datatables in my app and have customized the table toolbar to include additional buttons. However, I've encountered an issue where adding a second button causes it to be displayed below the first one, despite there being e ...

cssreactjsmaterial-uimui-datatable

Starting the description text immediately after the title while maintaining equal width for the title can be achieved by carefully

I need some assistance with formatting a title and description in a specific way. The title should be followed by the description starting on the next line while maintaining the same width for the title. It should resemble the image linked below https://i. ...

htmlcss

Is it possible to create a mouse-following effect with lighting using Javascript

Recently, I've been honing my Javascript skills and decided to create a follow-mouse function. After successfully implementing it, I started brainstorming a new concept that I'm unsure is achievable. Is there a way to develop an "orb of vision" ...

javascripthtmlcss

Large button in Bootstrap 3 breaks out of Jumbotron on smaller mobile screens

I have set up my layout with a Jumbotron that features a prominent call-to-action button. <a href="#" class="btn btn-lg btn-success">Let's Purchase Something Elegant</a> However, when viewed on an XS mobile screen, the button extends bey ...

csstwitter-bootstraptwitter-bootstrap-3

Display the hidden element using jQuery with the !important rule

There is a specific element that has been given a class with the following CSS styling: .cls { display:none !important; } Despite attempting to display this element using jQuery $(".cls").show(); This method does not seem to be effective. Is ...

javascriptjqueryhtmlcss

What steps do I need to take in order to accomplish this specific CSS

Hey there, I have a question that may seem silly, but I am struggling to find a solution on my own. Unfortunately, my CSS skills are not the best :( I'm trying to achieve the following layout where the text should wrap at the end of the container (di ...

css

Is there a way to apply padding to a div element that has a display property set to table-cell?

I am trying to achieve a design where I have an image and a div containing vertically centered text. The div should have padding around it along with a border, similar to this example: Currently, this is the closest I have come to replicating the desired ...

htmlcss

Mobile site experiencing slow scrolling speed

The scrolling speed on the mobile version of my website, robertcable.me, seems to be sluggish. Despite conducting thorough research, I have not been able to find a solution. I have attempted to address the issue by removing background-size: cover from my ...

javascripthtmlcss

I'm having trouble getting this button and icon to align properly. How can I fix this misalignment

Take a look at the HTML code snippet I'm currently working on... <div id="projects"> <H1 class="projects">PROJECTS</H1> <div class="box"></div> <div class="box"></div> <div class="box"></ ...

htmlcss

A PHP string containing hashtags without spaces will not be parsed into individual hashtags

I have a challenge where I want to extract individual hashtags from a string that contains hashtags. Currently, I am utilizing the following code: preg_match_all('/#([^\s]+)/', $str, $matches); #test #test #test #example The code functio ...

phphtmlstringhashtag

Tips for displaying user data from a mongodb database on a webpage, making edits to the information, and then saving the updated data

I have a website where users can register, log in, and update their profile information. However, I am facing an issue where only the data of the first user in the database table is being retrieved. How can I get the data of the currently logged-in user? ...

javascripthtmlnode.jsajaxmongodb

Having trouble capturing a photo from webcam using HTML5 and getUserMedia() in Google Chrome upon initial page load

Using the information from an article on HTML5Rocks, I am attempting to create a tool that can capture photos from a webcam. Here is an excerpt of my HTML code: <button type="button" name="btnCapture" id="btnCapture">Start camera</button>< ...

javascripthtmlhtml5-canvashtml5-videowebcam

What steps should I take to adjust the price when multiple items are chosen?

I am working on a school project that requires JavaScript programming assistance. You can view the code here: https://jsfiddle.net/zvov1jpr/3/ HTML: <script src="java.js"></script> <div id="formular"> <div id=&qu ...

javascripthtml