Arrange a variety of images with different dimensions in a narrow row while keeping the width fixed and adjusting the height accordingly

Imagine you have a collection of 3 (or more) images, each with different sizes and aspect ratios, within a fixed-width div (for example width:100%):

<div class="image-row">
   <img src="1.png">
   <img src="2.png">
   <img src="3.png">
</div>

How would you go about ensuring that all the images have equal height and together fill the width of the container in a tidy row?

I've experimented with various configurations of flex, inline-block, and nowrap in combination with height:100% or object-fit, but haven't found a solution. I run into issues like distorted aspect ratios, cropping parts of the image, or uneven heights.

In simple terms, it seems straightforward - scale each image individually to a uniform height, then resize them as a group to fit a specified width, all while maintaining their original proportions. Is there a specific limitation in CSS that prevents this from working seamlessly?

htmlcssimageflexboxalignment

Answer №1

If you're looking to ensure all images fit within the same width and height div, setting them as background images might be the solution. Using background-size:cover, you can have images of different sizes fill the space without losing any parts due to varying aspect ratios. Adjusting the background-position or editing/cropping the photos beforehand to match the same aspect ratio are other options if compromising is not an ideal choice.

img {
  width: 33%;
  height: 150px;
}

.content {
  width: 33%;
  display:inline-block;
  height:150px;
}

#left {
  background-image: url("https://i.ytimg.com/vi/tYBk4kLHPkk/maxresdefault.jpg");
  background-size:cover;
 
}

#center {
  background-image: url("https://i.pinimg.com/736x/18/f1/a7/18f1a75691c28433c0f1ef502573966b--tv-memes-office-gifs.jpg");
  background-size:cover;
}

#right {
  background-image: url("https://s-media-cache-ak0.pinimg.com/736x/bf/73/19/bf73196327b409d12c214e9994de369e--graduation-caps-grad-cap.jpg");
  background-size:cover;
}
<div class="image-row">
  <div id = "left" class="content">
  </div>
  <div id = "center" class="content"> 
  </div>
  <div id = "right" class="content">
  </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

What is the best way to center my form vertically within the form container?

I am having trouble aligning my form vertically. I've experimented with different methods such as using display: table-cell and vertical-align: middle property, but nothing seems to work. I want to maintain the current structure of the page and would ...

htmlcss

Incorporate a jQuery userscript on Firefox that includes a link to a form

Attempting to incorporate a search link into an online form using a userscript with jQuery, specifically for Firefox. I typically work in Chrome, so I'm encountering some challenges with compatibility in Firefox. However, I need this to be functional ...

javascriptjqueryhtml

What is causing the Bootstrap accordion to not display content when clicked on?

As a beginner in web development, I am currently working on my very first website. One issue I'm facing is with incorporating an accordion-style card in my webpage. Although it allows me to click on different titles, the collapsed ones fail to expand ...

htmlcssbootstrap-4

Using Javascript, delete all chosen HTML elements containing innerText

Looking to extract certain HTML tags from a block of code in TextArea1 and display the modified output in TextArea2 upon clicking a button. <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8&quo ...

javascripthtml

Modify the Div background color by accessing the HEX value saved in a JSON file

(I made a change to my code and removed the br tag from info2) Currently, I have successfully implemented a feature using jQuery that reads color names and hex values from a JSON file, populates them in a drop-down select menu (which is working fine). Now ...

javascriptjqueryhtmlcssjson

Retrieve HTML content from a JSON object and render it on a web page

I am facing a challenge with decoding html that is in json format. I'm struggling to figure out how to retrieve my html and display it on a page. It seems like json_decode isn't the solution. Can anyone help me with this issue? Appreciate any as ...

phpjavascriptjqueryhtmljson

How can I utilize CSS shapes to create clickable images?

I'm facing a challenge in making an input field and button functional even when they are positioned behind a uniquely shaped PNG image. https://i.stack.imgur.com/eOg0N.jpg Initially, I believed that by applying a shape to the image, it would automat ...

htmlcssshapescss-shapes

What is the process for adding a line of JavaScript directly into the code (instead of using an external .js file)?

I am trying to insert a script tag that will run one line of JavaScript directly into the head of a document instead of inserting an empty script tag with a src attribute. So far, I have the following code: <script type="text/javascript"> var script ...

javascripthtmldom

Ways to effectively hide one window or pop-up upon clicking another

I am working on creating an interactive website for my close circle of friends and family. One of the key features is to have a button that displays their biography when clicked. What I'm aiming for is that when a different bio is selected, the previo ...

javascriptjqueryhtml

Extract the content from a <Span> element without specifying its ID

Is there a way to make it so that when a user clicks on an HTML tag, the text is copied to their clipboard? I also need to ensure that this functionality does not apply to a specific tag ID/name as I am unable to add those to my span. Is there a way to aut ...

javascripthtmljquery

Centering Text and Image in React Horizontally

I'm attempting to achieve a layout similar to the one shown in the image below. Currently, my image is positioned at the top with the text below it. I would like to arrange it so that the text appears on the right side of the image. Please take a loo ...

cssreactjsmaterial-uiflexboxjss

Resolving the Material-UI NextJS Button Styling Dilemma

I've encountered an issue with the styling of a few buttons in JS. When I apply a styling class using className, the formatting works fine on the initial render but loses its styling on subsequent refreshes. This problem is specific to two individual ...

htmlcssreactjsmaterial-uinext.js

Separating the rules for development and production modes in the webpack configuration file

I'm currently in the process of working on a front-end project using HTML. Within my project, I have integrated the Webpack module bundler and am utilizing the image-webpack-loader package for image optimization. However, I've encountered an issu ...

javascripthtmlnode.jswebpackwebpack-dev-server

Animate CSS every quarter of a minute

Is it possible to create an animation that runs infinitely every 15 seconds in the sequence 1, 2, 3, 4, 3, 2, 1 with different delays for each item using CSS? The animation delay seems to only work on the first iteration. Achieving this effect is easy wi ...

htmlcssanimation

Can we access an element within the document using its context?

One common method to access an element is by using its id: <div id="myId"></div> <script type="text/javascript"> $(document).ready(function(){ $('#myId').something(); }); </script> However, there are inst ...

javascriptjqueryhtml

The confirm() function shows up before the background on a blank layout

I'm facing an issue where whenever my confirm() function pops up, the alert box displays correctly but then the background turns blank. I've tried various solutions like moving the entire if statement to the bottom of the page or at the end of th ...

javascriptphphtmlcss

Struggling to populate a dropdown list with HTML, PHP, and MySQL

Here is the code snippet for creating a payment form: Everything seems to be working fine, but there is an issue with the supplier-ID dropdown. The dropdown is being created but it is not fetching data from the mysql table and no errors are being display ...

phphtmlmysqlcss

Sorting by price using the ng-repeat directive is not suitable for this

Utilizing angular's ng-repeat along with orderBy on a product catalog page to sort the products based on a select change. The ordering by name using orderBy works as expected, however, when it comes to price it sorts like this: 1,10,11,12,13,14,2,3,4 ...

javascripthtmlangularjsangularjs-orderby

The closing tag for the "body" element was excluded even though OMITTAG NO was specified

While attempting to validate my contact support page, I encountered the following errors: Omission of end tag for "body", even though OMITTAG NO was specified ✉ You may have forgotten to close an element or intended to self-close an element by ending ...

javascripthtmlvalidation

Chakra UI Not Displaying Proper Responsiveness on the User Interface

I recently integrated Chakra UI for styling a project on Next.js, and while most components are functioning properly, I am facing challenges with implementing responsive layouts. The styles do not seem to adapt when the screen size is reduced. Here's ...

cssresponsive-designnext.jschakra-ui