Using CSS to display several images across the entire screen width

I need to display multiple images in a row that fill the screen width:

<img src="1.jpg" style="max-width:25%">
<img src="2.jpg" style="max-width:25%">
<img src="3.jpg" style="max-width:25%">
<img src="4.jpg" style="max-width:25%">

Some pages have 4 images, while others may have 5, 6, etc.

I want a solution in CSS that can handle different numbers of images without changing the max-width for each page individually. Is there a way to achieve this?

p.s. I prefer not to use tables or background-images since a JavaScript plugin needs to recognize them as img tags, and using img tags is also more search engine friendly.

htmlcssimagewidthscreen

Answer №1

If you're looking to create a versatile grid layout, I highly recommend utilizing flexbox. With its efficiency and flexibility, flexbox can easily adapt to various grid designs. Simply encase your images within a container class with the property display:flex, and apply flex:1 to each img element for uniform alignment. If further adjustments are needed, explore the possibilities as flexbox offers immense potential! Check out this example for reference.

.flexContainer {
  display:flex;
  max-height:200px;
  
}
.flexContainer > img {
flex:1;
border:1px solid;
margin:1px;
}
<div class="flexContainer">
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
<img src="http://lorempixel.com/image_output/technics-q-c-640-480-10.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-3.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
</div>
<br/>
<div class="flexContainer">
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
<img src="http://lorempixel.com/image_output/technics-q-c-640-480-10.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-3.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-5.jpg"/>
<img src="http://lorempixel.com/image_output/technics-q-c-640-480-10.jpg" />
<img src="http://lorempixel.com/image_output/food-q-c-640-480-3.jpg" />
</div>

Answer №2

If you're looking to solve this issue without relying solely on CSS, a simple jQuery solution can help:

$(container).each(function() {

    var numItems = $(this).children().length;
    var itemWidth = 100 / numItems + '%';

    $(this).children().css('width', itemWidth);

});

In this scenario, container refers to the element containing your images. The jQuery each loop is included to account for situations where there are multiple rows of images on the webpage.

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 include two rows in a single INSERT statement?

For each product that a customer selects to purchase, I have set up a shopping cart to display these items. The requirement is to add each selected product as a separate row in the 'order_details' table with the same customer_id. Screenshot: htt ...

phphtmlmysql

Manipulating the span of columns in an HTML TableCellElement is not supported for retrieval or

Currently, I am working on generating an HTML table within my Dart code. In this process, I am appending rows to the table using `TableRowElement` and cells using `TableCellElement`. The issue arises when I try to set the `colspan` property of these cells ...

htmldynamicdartcellhtml-table

Deploying an Azure Blob Trigger in TypeScript does not initiate the trigger

After successfully testing my Azure function locally, I deployed it only to find that it fails to trigger when a file is uploaded to the video-temp container. { "bindings": [ { "name": "myBlob", "type&qu ...

javascripthtmltypescriptazureazure-functions

Achieving Full Height and Width of Tab Panel with Bootstrap 4.3

I recently upgraded to bootstrap 4.3 and discovered the handy sizing classes m-* and w-* for setting element height and width. After successfully achieving 100% height and width for the container, I'm now looking to apply these dimensions to the tab-p ...

cssbootstrap-4

Issue with Jquery button click event not triggering

I'm facing an issue that seems simple, but the solutions provided for a similar problem don't seem to be working for me. My aim is to trigger an AJAX request when a button is clicked, but it doesn't seem to be happening. Here's an exa ...

javascriptjqueryhtmlajax

Aligning a Facebook share button to the center of a webpage

On my webpage, I have the following section: <div style="align:center"> <div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js#appId=217585988283772&amp;xfbml=1"></script> <fb:like hre ...

htmlcssstyling

Embedding JavaScript within an HTML document

Need help with linking HTML files and utilizing JavaScript outputs? I have an .html file displaying a webpage with tabs that I want to link to another .html file. How can I create a link on my page to navigate to the other file? Additionally, in the linked ...

javascripthtml

wrap text image not compatible with responsive layout

Plunker Link: https://plnkr.co/edit/kC9SPK2e7iy5OYhKpwOO?p=preview <html> <head> <link data-require="bootstrap@*" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> ...

htmlcssbootstrap-4

Slider MIA - Where Did it Go?

I'm having an issue with my slider. When I load the page, it doesn't show the first image until I click the button to load it. How can I make it display the first image by default? Below is my JavaScript code: <script> var slideIndex = 1 ...

javascriptjqueryhtmlcssslider

Issue with IE failing to load a particular Stylesheet

Have you had a chance to view this live demonstration? My website has two different stylesheets, one specifically for Internet Explorer and another for regular browsers. Here's how they are set up in the header: <link rel="stylesheet" type="text/c ...

cssinternet-explorer

I plan to add new information to my table only when the user clicks on the submit button. This is what I have accomplished until now

<!DOCTYPE html> <html> <head> <title>Sign up page</title> </head> <body> <form method="get" action="signup_redirect.php"> username: <input type="text" name="username" placeholder=" ...

phphtmlmysqli

retrieving data from a node and embedding it into an HTML file

In my project, I have an index.html file and an app.js nodejs file. Within the app.js file, there is a variable named "name" that I would like to display in my index.html page. Here is the code snippet: var name = "Utsav"; var HTTP = require('HTTP&a ...

javascripthtmlnode.jsserverserver-side

Span element not displaying as a clickable hyperlink

The magnifying glass icon inside the orange search bar at the top of this page is not appearing as a link, so when hovered over there is no pointer.. Any thoughts on why this might be? Below is the CSS: .searchGlass { background-image: url(/images/search ...

htmlcss

primary and secondary colors within the Material UI design scheme

Is there a way to apply different colors for Cards and Papers in the Material UI Theme that are compatible with both light and dark modes? In my app, I have a list of Cards placed on top of a Paper background. Currently, the default color for both the Pap ...

cssmaterial-uithemes

Leveraging external files with Django template referencing

Having trouble including external JavaScript and CSS files in the head tags of my Django template. They only seem to work when placed before the closing body tag. Any idea why this is happening? Another issue I'm facing is that when using inheritance, ...

javascriptpythoncssdjango

Concealing photos only to reveal them in an elegant fancybox display

I am looking to create a hidden gallery that can be displayed in fancybox. The idea is for visitors to click on one image and then have the ability to view more "hidden" pictures within fancybox. I know this can be accomplished by showing links or images ...

javascriptcssfancyboxhideshow

Following the upload process, my webpage is mistakenly referencing the wrong directories

After completing a mock site project, I encountered an issue where the styling was perfect locally but did not show up once uploaded to my server and Github pages. Looking into the console, I found this error message: Failed to load resource: the server ...

htmlcss

Beginner tips for adding padding in CSS

Could anyone clarify a discrepancy in the material provided here: w3schools.com code example According to the code : th,td { padding:5px; } Also, based on their explanation here: http://www.w3schools.com/cssref/pr_padding.asp The explanation states tha ...

htmlcss

Guide on accessing the content inside a <div> element

This is what I currently have: <div id='staff' >Staff</div> My goal is to add an asterisk after the 'Staff' text to show that the associated part is necessary. Is there a way to use CSS3 and polymer-dart to target the &ap ...

css

Is there a way to retrieve the ID value from a populated div using ajax?

Struggling to pass the correct id function back to AJAX. I'm working on a product bulletin generator that allows items to be added by their SKU code. Adding items works fine, but the issue arises when trying to delete a product from the bulletin. The ...

ajaxvariablesloopshtml