Is there a way to display a set of images of varying sizes alongside one another, ensuring that they all maintain the same height without any distortion or cropping?

I'm faced with the challenge of displaying a series of images (up to 5) side by side, each with different sizes. This poses a problem when trying to maintain consistent height without compromising image resolution. The goal is to have all images aligned at the same height regardless of their individual dimensions. Currently, there are 5 divs containing img tags, and the aim is to create a dynamic solution that allows an editor to easily upload their own images.

Technologies in use: Bootstrap 4

Current display format: https://i.sstatic.net/k21NY.jpg Desired display format: https://i.sstatic.net/I1f04.jpg

Attempts were made to limit the max-width of the div containing the img tag to 75px, but this resulted in parts of the images being cut off.

.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
...
   
 
    ...
 .
   
<div class="container mt-5">
  <div class="row d-flex justify-content-center">
  
       
         </div>
      </div>
     </div></div>

The objective is to ensure uniform behavior for all div and img tags so that future integration of dynamic content becomes seamless, allowing editors to personalize the imagery as needed.

twitter-bootstrapcssbootstrap-4

Answer №1

For those utilizing bootstrap 4, both of these methods should be effective:

.bootstrap-grid {
  display: inline-grid;
  grid-template-columns: repeat(5, 20%);
  align-items: baseline;
}
.bootstrap-grid img {
  width: 100%;
  max-height: 120px;
  object-fit: contain;
  padding: 1rem;
}
.icons-flex > .container {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
}
.icons-flex > .container > div {
  flex-grow: 1;
  flex-direction: row;
  width: 20%; 
  text-align: center;
}
.icons-flex > .container > div > img {
  max-width: 100%;
  max-height: 120px;
  padding: 1rem;
}
<div class="container">
    <h2 class="text-center mt-4">Bootstrap Grid</h2>
    <div class="row mt-3 bootstrap-grid">
        <div class="grid"><img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Zanella.png"></div>
        <div class="grid"><img src="http://www.uniminuto.edu/documents/991974/8397593/logo_issuu.png/081442f2-a9a8-4041-b0ef-9c47939df481?version=1.0&t=1511884354155&imagePreview=1"></div>
        <div class="grid"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Logo_Globosat.svg/500px-Logo_Globosat.svg.png"></div>
        <div class="grid"><img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Logo_MAM.png"></div>
        <div class="grid"><img src="https://www.pngeiti.org.pg/wp-content/uploads/2018/03/cropped-favicon-270x270.png"></div>
    </div>
    <h2 class="text-center mt-4">Flex</h2>
    <div class="row mt-3 flex icons-flex">
        <div class="container">
            <div><img src="https://upload.wikimedia.org/wikipedia/commons/3/30/Zanella.png"></div>
            <div><img src="http://www.uniminuto.edu/documents/991974/8397593/logo_issuu.png/081442f2-a9a8-4041-b0ef-9c47939df481?version=1.0&t=1511884354155&imagePreview=1"></div>
            <div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Logo_Globosat.svg/500px-Logo_Globosat.svg.png"></div>
            <div><img src="https://upload.wikimedia.org/wikipedia/commons/c/cc/Logo_MAM.png"></div>
            <div><img src="https://www.pngeiti.org.pg/wp-content/uploads/2018/03/cropped-favicon-270x270.png"></div>
        </div>
    </div>
</div>

If you found this helpful, feel free to check out the demonstration on this fiddle link

Answer №2

To ensure consistent image heights, consider implementing a max-height property within the .img-styles class. Alternatively, you can apply this property to the div encompassing the img tag, though effectiveness may vary if all images are placed within a single div.

If uniform image heights are desired, eliminate the max-width declarations from both the .img-styles and .imgbox classes. However, keep in mind that images must exceed the specified max-height, potentially resulting in wider display dimensions.

In cases where certain elements should maintain varying heights as depicted in your layout, retaining the max-width property is advisable for controlling width proportions. In such scenarios, individual image heights may be less critical given the variable nature of element heights.

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

Utilizing Jquery for deleting text content from a div element

I have a situation where I need to eliminate the text "(2012)" from a particular div using jQuery. Here is the code snippet that I am currently using: var el = $("#myDiv"); //replace(/word to remove/ig, ""); el.html(el.html().replace(/(2012)/ig, "")); ...

jquerycsshtmlreplace

Linking children to their parents in a mat tree structure

I'm looking to create a mat tree based on the provided diagram. https://i.sstatic.net/cTY2w.png So far, I've managed to design the icons and boxes, but I'm struggling with drawing the connecting lines. Can anyone assist me with this part? I ...

cssangulartreeangular-material

Variety of formatting options for menu items when the menu is in its collapsed state

I am working with a Bootstrap nav-bar that collapses into a button by default. Within my nav-bar, I have opted for images instead of text links. However, when the nav-bar is collapsed, I would like these images to be smaller in size. Is there a way to cu ...

csstwitter-bootstrap

I'm curious, which effect or plugin is being used here?

Do you know the name of this particular parallax effect or the plugin used for it? I'm also interested in finding more examples with a similar type of effect, so if you have any tutorials on how to achieve it, that would be greatly appreciated. ...

jqueryhtmlcss

Using javascript to determine the vertical position of an element within a fixed container

I'm facing a challenge in determining the vertical position of an element using scrollTop when the parent container has a position: fixed. When I use scrollTop, it consistently returns a value of 0. This probably occurs because the element is no long ...

javascripthtmlcss

Tips for presenting the cards in a professional layout

After creating a group of cards in angular using a for loop, I encountered an issue: <div class="row"> <div *ngFor="let dev_data of data" class="col-3"> <div class="card shadow"> <div class="card-body ...

htmlangularbootstrap-4

Shifting an HTML anchor to account for a stationary header - Safari compatibility with alternative CSS styling

I made adjustments to my HTML anchors by adding an offset in the CSS to accommodate for a fixed header in my theme: margin-top: -175px; padding-top: 175px; } /* Adjustments for screen sizes of 760px and smaller */ @media (max-width:760px){ #r ...

htmlcsssafari

Solving the CSS Trick: Responsive Data Table (featuring inline editing) Display Glitch

In my quest to create a responsive table with inline editing, I turned to Chris's guide at CSS-Tricks (check it out here). To see how it all comes together, take a look at this Plunker demo. On mobile screens, the responsiveness is on point. https: ...

htmlcssangularjsdatatableresponsive-design

No matter what I try, connecting the CSS file to my HTML file just won't seem to work

I've been attempting to connect a CSS file to my HTML index file, but I can't seem to get it to work no matter what I try. I'm using VSCode. When typing the link from scratch, it auto-completes or shows up, indicating that it recognizes it. ...

htmlcss

Concealing a column in a printed output on Internet Explorer 9

Our application features a webgrid with a hidden reference column that is concealed using CSS. While this method works seamlessly on most browsers, we encounter an issue when it comes to printing. In our print.css file, where the column is hidden similar t ...

cssinternet-explorerprinting

Padding issue with Dropotron plugin not functioning properly

I'm struggling to reduce the right space on my drop-down menus. https://i.sstatic.net/rz3r3.jpg Here's what I've tried: .dropotron li { box-shadow: inset 0 1px 0 0 #e6e6e6; padding-right: 0 !important; } U ...

htmlcss

Unusual Blank Space Found Beneath a Displayed Block Item

I've noticed some odd whitespace appearing under all my display: block elements within a meganavigation. Despite adding the code snippet below (which also determines column widths), I can't seem to pinpoint what's causing this issue. Wheneve ...

htmlcss

CSS: incorrect text alignment

I'm encountering an error with text-align. I want my text aligned to the left, but it's starting from the center. I've tried to fix it without success. Can someone please review and correct my code? CSS .text { width: 100%; height: ...

htmlcss

Navigation issues in Internet Explorer appear to be causing problems

I've been working on a new website template design and decided to incorporate a click navigation menu for added functionality (with a javascript fallback for accessibility). I found the menu design on Toddmotto.com and it worked perfectly in most bro ...

jquerycssnavigation

Arranging the final item in the empty space above the div section using Flexbox

Kindly review this code for additional details. Take a look at the image above for a clearer understanding. On the right side of the image, you will notice that the last row contains two items and the second row has one empty slot. I need to rearrange one ...

cssflexbox

Nav links in Bootstrap are seriously misplaced

My navigation bar, created with Bootstrap 4 CSS, consists of 3 links and a brand logo. Despite my expectations of all elements aligning properly, they appear disorganized and not in line. Please see the current layout here: https://i.sstatic.net/OeKcf.pn ...

htmlcsstwitter-bootstrapalignmenttwitter-bootstrap-4

Is there a way to eliminate a CSS class from a div element within the outcome of an ajax response?

My ajax response is functioning properly and displaying the content of the result, but I am always getting the CSS effects which I do not want. I need to eliminate the class="container body-content" from the following div in the ajax call's result. ...

jqueryhtmlcssajax

Utilizing a JavaScript function to toggle the Bootstrap dropdown without the need for manual clicking

I've configured a Bootstrap dropdown in my site's mini cart that includes a lightbox effect to grey out the background content when the dropdown is activated. Here's the code snippet: $(".dropdown").on('show.bs.dropdown hide.bs.dropdow ...

javascriptjqueryhtmlcssbootstrap-4

The background color in CSS frames the text with a unique hue

Is there a way to wrap my multi-line text inside a div with a background color that automatically adjusts its size based on the text length? .multiline{ padding:0px; white-space: pre-wrap; height: 100px; width: ; margein:0px } <div style="b ...

htmlcss

Place text directly below the images for proper alignment

In my current rails app, I am working on the contributors page. Each member's name should be displayed centered beneath their respective images. Any assistance with this would be greatly appreciated. Below is a snippet from my member.html.erb file ...

htmlcssruby-on-rails