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.

https://i.sstatic.net/yc2jq.png

.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

Simple code in HTML and CSS to assign unique colors to individual characters of the text

What's the best way to assign a unique color to each character in a long text on an HTML page while keeping the file size of the generated HTML as small as possible? The goal is to use minimal color formatting tags. Any suggestions on how to achieve t ...

htmlcsscolors

Use a personalized CSS class with the Kendo Dropdown Widget

Is there a way to assign a custom CSS class to the dropdown HTML container that is created when using the .kendoDropDownList() method on a <select> or <input> element? In this fiddle ( http://jsfiddle.net/lav911/n9V4N/ ) you can see the releva ...

javascriptjquerycsskendo-uikendo-dropdown

When arriving on a page via an HTML anchor tag, the CSS style does not appear. How can I "reinstate" it?

I have set up a website with an index.html page that links to a contact.html page using anchor tags. On the contact.html page, there are anchor tags that should navigate the user back to specific sections of the index.html page. The navigation works fine, ...

javascripthtmlcssanchor

Determining the Location of a Drag and Drop Item

I have been utilizing the code found at for implementing Drag & Drop functionality. My inquiry is: How can I retrieve the exact position (x,y) of a group once it has been dragged and dropped? ...

javascripthtmlcanvasdrag-and-dropkineticjs

The tab content in VerticalTab Material React UI is spilling out and overflowing

Having some trouble with this particular component. Whenever I input content larger than my Grid size, it overflows the VerticalTab section. You can see an example of this in this codesandbox. Here's what I've attempted: return ( <div cla ...

htmlcssmaterial-ui

SQL - Extracting Information from HTML in a Column

I have a column named "Content". Within this column, there is HTML code containing various data. My task is to extract specific information from this HTML code and split it into five different columns: "Name", "Surname", "Email", "Telephone", and "Message" ...

htmlsql

Alter the dimensions and material displayed on Vue

In my Vue.js project, I have a topbar with two divs whose size and content need to be adjusted based on whether the user is logged in. If they are not logged in, it should look like this: <div id='search' width="400px"></div><div ...

htmlcssvue.jsvuejs2

The z-index property does not seem to be affecting the positioning of images and buttons

I'm working on a school project creating an educational website about pumas. I want to have a set of buttons that are hidden behind an image, and when the user clicks on the image, the buttons should be revealed. However, I am facing an issue with the ...

htmlcss

What is the reason for Internet Explorer making a POST request upon clicking <a><button/></a>?

Here's the structure of my form: <form method="post"> {% csrf_token %} <table> {% for field in form %} {% partial "partials/field.html" field=field %} {% endfor %} <tr> <td& ...

htmlinternet-explorerhttp

What is the best method for loading multiple HTML files into a Div container?

Recently, I made the decision to improve the look of an online manual I have been working on for my company by incorporating Bootstrap. The manual is structured with a tree-view that contains titles linking to HTML files with information and CSS stylesheet ...

javascriptjqueryhtmlcss

Tips for adding transparent images (such as logos) to an HTML website: I'm struggling with getting rid of the white background that appears on the website. Does anyone know how

Seeking guidance as a beginner web developer. I am currently working on adding a transparent logo to my website, but the white background is showing up behind the logo. How can I fix this issue? Here is the link to the image - Here is the HTML & ...

htmlcssbackgroundtransparent

revealing a particular field in jQuery during the validation process

Edit: Currently, I am utilizing the jquery validate plugin and have hidden all error messages initially. Upon checking a specific input field, my objective is to unhide the error message if it is invalid without causing error messages to appear in other f ...

javascriptjqueryhtmlcss

Code to select the first row in a table using CSS styling

I'm looking for a CSS selector to target the first <tr> in a <table>. After searching online, I found some selectors like tr:first-child and table *:first-child tr:first-child, table tr:first-child. Unfortunately, these do not work in my ...

htmlcsscss-selectorshtml-table

Displaying a document file on a webpage hosted by a raspberry pi

My Raspberry Pi hosts a local website that does not require an internet connection. I want the webpage to display text from a large file line by line as users access it. For example, if the text file contains: Hello How are You doing Today? The brow ...

htmlserverraspberry-pi

The spacing problem arises from the interaction between two HTML tags containing a Bootstrap file

view image details hereUsing Bootstrap 5, I have a screenshot with an h5 element in a black border and an em tag in a red border. I specified margin 0 to the h5 element but it still does not touch the em tag (in red border). I have tried adjusting line spa ...

htmlcssbootstrap-5

Can you explain the contrast between open and closed shadow DOM encapsulation modes?

My goal is to create a shadow DOM for an element in order to display elements for a Chrome extension without being affected by the page's styles. After discovering that Element.createShadowRoot was deprecated, I turned to Element.attachShadow. Howeve ...

javascripthtmldomshadow-dom

What could be the reason behind the disappearance of text from the previously highlighted button in my calculator's "button grid" when I change the highlighted button?

Currently, I am in the midst of creating a tip calculator with a grid consisting of various percentage buttons. My main objective is to change the font and background color when any tip button is selected. Nevertheless, an issue has surfaced - whenever I h ...

javascripthtmlcsscss-grid

Is there a way to position these divs in a line using inline-block?

I need help aligning two divs with text differently - one to the top left and the other centered but not on the same line. Here's the layout I'm aiming for: ---------------------------------------------- |Backstage |Issue 4 | | ...

htmlcss

Retain chosen option after form submission in PHP/HTML

I have seen many questions asked about this before, but despite trying various solutions here, none seem to work for me. I am populating a list from my mysqli database: <select multiple="multiple" name="formCountries[]" size="5" id="keuzeproduct"> ...

phphtmlmysqli

Ways to dynamically insert a new row into a table based on user input in a Postman-like reactive table

Is there a way to dynamically insert a row when a single character is entered into an input field in the header tab, similar to how Postman functions? 1) If a user types any single character in the td of the first row, then a new row should be added below ...

javascripthtmlangular