Ways to display a series of images side by side to fill the entire width consistently

I need a solution to display multiple images in a box, all set to the same height and width of 154px x 125px. While this can be achieved, the issue arises when there isn't enough space for the final image, leaving blank areas. Is there a way to make the images automatically adjust to the full width of the box regardless of screen size?

.tab-content {
    background-color: #0c1011;
    padding: 0px 0px;
    margin-bottom: 0px;
    display: block;
    overflow: hidden;
}
.tab-pane img {
    display: inline-block;
    float: left;
}
.tab-pane a {
    display: block;
}
.img-responsive {
    display: block;
    height: auto;
    max-width: 100%;
}
<div class="tab-content clearfix">
  <div class="tab-pane active" id="1a">
   <a href="#">
      <img src="http://lorempixel.com/154/125/" class="img-responsive">
   </a>
   ...
  </div>
</div>

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

Here is the codepen:

https://codepen.io/nitingsingh/pen/rJeROm

htmlcssresponsive-design

Answer №1

If you're interested in learning about flex box in CSS3, be sure to check out this helpful guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Using flex box can greatly assist you with your layout needs. Take a look at the example below:

body {margin: 0} /* additional styling */

.tab-content {
  background-color: #0c1011;
  padding: 0; /* shorthand */
  margin-bottom: none;
  /*display: block; by default*/
  overflow: hidden;
}

.tab-pane {
  display: flex;
  flex-wrap: wrap;
}

.tab-pane a {
  flex: 1 0 auto; /* shorthand | flex-grow: 1; | flex-shrink: 0; | flex-basis: auto */
}

.img-responsive {
  display: block;
  width: 100%;
}
<div class="tab-content clearfix">
  <div class="tab-pane active" id="1a">
    <a href="#">
      <img src="http://lorempixel.com/154/125/" alt="" class="img-responsive">
    </a>
    <!-- Additional image links here -->
  </div>
</div>

Answer №2

             .tab-content {
                       width:100%;
                       display: flex;
                       flex-grow:1;
                       flex-shrink:1;
                       justify-content:space-evenly;

                 }

             .img-responsive {
                    max-width:150px;
                    max-height:126px;
             }

To ensure your image does not exceed a certain size, utilize the max-width property. Conversely, if you want to set a minimum width of 150px for the image, consider using min-width. Another option is to implement justify-content: space-around for image alignment by applying a flexible layout method with Flexbox.

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

Having trouble with the Slide Toggle menu closing unexpectedly?

$('span.nav-btn').click(function () { $('ul#menu').slideToggle(); }) $(window).resize(function () { if ( $(window).width() > 900) { $('ul#menu').removeAttr('style') } }); $('spa ...

javascriptjqueryhtmlcss

Showcase a Pair of Files Next to Eachother using HTML

I am a beginner with HTML and I am trying to accomplish a seemingly simple task. I have searched for similar questions and attempted the solutions provided, but none have worked for me. My goal is to have two documents displayed side by side on a web page ...

javascripthtmlcssimage

Trigger jQuery to play audio files

Something seems off with this code. The audio file isn't playing when the webpage loads. $(document).ready(function() { var audioElement = document.createElement('audio'); audioElement.setAttribute('src','content/aud ...

jqueryhtml

How to remove an item with a click using jQuery and PHP?

I have a question about deleting an item I just clicked on. I'm having trouble tracking it and resorting to drastic measures (like posting here) to delete everything in the list. Code Snippet: <div class="image-list"> <?php $count = 1; if ( ...

phpjqueryhtml

Three-handled slider

Just acquired a new slider component <input id="slider_price" type="text" class="span2" value="" data-slider-min="1000" data-slider-max="80000" data-slider-step="5" data-slider-value="[60000, 80000]"/> _ $('#slider_price').slider({ t ...

javascriptjqueryhtml

The background image fails to display

Having some trouble with setting an image as the background using CSS. When I directly input the image URL, it shows up fine with this code: background: url('images/image1.jpg); However, I would prefer to use this CSS code instead: .masthead { m ...

htmlcssweb

Position the image to the right of the dropdown menu in Bootstrap

While working with Bootstrap to create a top navbar on my webpage, I encountered some issues: Once the navbar dropdown is opened, I need to display an option list alongside an image positioned to the right of the list. The image should be the same height ...

htmlcsstwitter-bootstrap

Avoid reloading the page in PHP when the browser back button is clicked

I've built an HTML form where the values are passed to a second page using POST method. On the second page, I have an edit button that, when clicked, redirects back to the HTML form page with the user's typed values. However, my dilemma is figuri ...

javascriptphphtml

@media doesn't seem to be functioning properly when the screen width is below

I've been working on making my website fully responsive, but I've run into an issue where it won't recognize anything below 980px in width. Here is the CSS code I'm using: @media screen and (max-width:1029px){ h1{ font-size ...

cssresponsive-designmedia-queries

What could be causing my jQuery $(this).next().removeAttribute to not function properly?

I am currently working on a file upload form that includes buttons like "Choose file", "Upload", and "Add other file". I am facing an issue where the "disabled" attribute is successfully removed from the first Upload button upon File Input change, but it ...

jqueryhtml

Tips for concealing a dynamic table element in Angular 9

I have dynamically generated columns and rows in a table. Here is my HTML for the table component: <table id="tabella" class="table table-striped table-hover"> <thead class="thead-dark"> <tr> <th *ngFor="let header of _ob ...

javascripthtmlangularfrontend

Having trouble making changes to FontAwesome CSS using jQuery?

I am currently working on an MVC project where I am using Ajax to update a specific section of a View that contains a FontAwesome 5 icon. The FontAwesome icons are set using CSS classes, so my initial assumption was that it would be simple to remove and ad ...

jquerycssfont-awesomefont-awesome-5

Position the image in the center of the div both horizontally and vertically

At the moment, I have a header division with two sub-divisions called header-top and header-bottom. I am attempting to position my logo in the top-header section and align it both vertically and horizontally. The logo is aligning correctly horizontally, bu ...

htmlimagecss

The ScrollToTop feature in MUI component seems to be malfunctioning when paired with the useScrollTrigger hook

I am in the process of developing a custom ScrollToTop component using MUI's useScrollTrigger hook. More information can be found at this link Feel free to check out the sample code here: https://codesandbox.io/s/stackoverlow-mui-usescrolltrigger-er9 ...

javascripthtmlcssreactjsmaterial-ui

What could be causing my image not to show up on ReactJS?

I'm new to ReactJS and I am trying to display a simple image on my practice web app, but it's not showing up. I thought my code was correct, but apparently not. Below is the content of my index.html file: <!DOCTYPE html> <html> & ...

javascripthtmlcssreactjs

Step-by-step guide on achieving 100% height for the <main> element in a Material UI drawer demo

I have a question regarding the Material UI drawer. In my project, I am trying to change the background color of the main tag. However, the main tag's height is restricted to the content inside. Check out this link for reference Setting the height t ...

htmlcssreactjsmaterial-ui

The position of a jQuery element gets reset when both the show and stop animations are used

When I use jQuery's .position() to place an element, everything works fine. But as soon as I display an animation and then cancel it with an ajax call, the position of the element resets. function displayMessage(msg) { var $messageEl = $('#u ...

javascriptcssjquery-uijquery

Ways to achieve text transparency with CSS without converting it to an image

Is there a way to have my navigation bar indicate the selected page by changing the text color and adding a black background, while making only the text inside the current page nav transparent? For example, you can see the effect here: sammarchant.co.uk/n ...

css

Steps for loading a new page by clicking an input button:

I'm looking for some help with a basic issue I'm having while customizing a WordPress plugin. I want to redirect the user to the thankyou.php page when they click on the place_order button. I tried changing the input value to thankyou.php, but it ...

phphtmlwordpress

Modifying HTML code within a WebView (Monodroid) explained

WebView webView = FindViewById<WebView>(Resource.Id.webView1); webView.HorizontalScrollBarEnabled = false; webView.LoadUrl("res.htm"); I am looking for a way to modify certain parts of HTML code in my file and display it using webView without actual ...

c#androidhtmlxamarin.android