What's the best way to arrange a series of images in a horizontal line using html and css?

Looking for a way to display a list of images in a straight line with just the right amount of spacing between them? Check out my fiddle and see the challenge I'm facing.

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


I've been experimenting with HTML code to achieve this look. Here's what I have so far:

<div class="images">
<img src="https://s7.postimg.cc/abhy97dln/stripe.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7013">

<img src="https://s7.postimg.cc/8wgdkj9yj/global-franchise.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7019">

<img src="https://s7.postimg.cc/ros8o6ynv/intuit_v1.png" alt="" width="150" height="44" class="alignleft size-full wp-image-7088">

<img src="https://s7.postimg.cc/6rw0jodjf/Franchise_Harbor.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7068">

<img src="https://s7.postimg.cc/ngxgf2f4b/Intercom.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7070">

<img src="https://s7.postimg.cc/qb0lshepn/Inc.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7071">

<img src="https://s7.postimg.cc/6rw0jm8dn/Pay_Stand.png" alt="" width="120" height="20" class="alignleft size-full wp-image-7072">
</div>




Unfortunately, I haven't had much success with the CSS codes I've tried so far:

.images
{
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
}

.images img
{
padding-left: 2%;
padding-right: 2%;
}

The images do center but end up shrinking significantly.



Can you help?

I'm seeking advice on how to adjust the CSS codes in my fiddle to achieve a straight line layout with equal spacing between each image.

htmlcssimagecentering

Answer №1

I have made some changes to your fiddle

.images {
  display: flex;
  justify-content: space-between;
  align-items:center;
  background-color: #eee;
  padding: 1rem;
  flex-wrap: wrap;
}

.images img {
  width: 5rem;
  height: auto
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="images">
<img src="https://s7.postimg.cc/abhy97dln/stripe.png" alt=""  class="alignleft size-full wp-image-7013">

<img src="https://s7.postimg.cc/8wgdkj9yj/global-franchise.png" alt=""class="alignleft size-full wp-image-7019">

<img src="https://s7.postimg.cc/ros8o6ynv/intuit_v1.png" alt="" class="alignleft size-full wp-image-7088">

<img src="https://s7.postimg.cc/6rw0jodjf/Franchise_Harbor.png" alt=""  class="alignleft size-full wp-image-7068">

<img src="https://s7.postimg.cc/ngxgf2f4b/Intercom.png" alt="" class="alignleft size-full wp-image-7070">

<img src="https://s7.postimg.cc/qb0lshepn/Inc.png" alt=""  class="alignleft size-full wp-image-7071">

<img src="https://s7.postimg.cc/6rw0jm8dn/Pay_Stand.png" alt="" class="alignleft size-full wp-image-7072">
</div>

</body>

</html>

Answer №2

Here are some changes you can try incorporating into your code that have been successful for me. In this context, vw refers to the viewport-width

Try setting width="90vw" for all images in your HTML file and update the following section in your CSS:

.images img
{
margin-left: 2vw;
margin-right: 2vw;
}

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

Is hard coding permissions in the frontend considered an effective approach?

I'm in the process of creating an inventory management system that allows admin users to adjust permissions for other employees. Some permissions rely on others to function properly, and I need to display different names for certain permissions on the ...

javascripthtmlangularuser-permissions

What is the best way to adjust the height and width of a div when it comes into view through scrolling?

How can I automatically and frequently change the size of my div when it is scrolled into view? HTML <div id="contact" class="fadeInBlock"> <div class="map"> <div class="pointer"> <div class="dot"></div& ...

javascriptjqueryhtmlcss

object stored in an array variable

I am looking to find out if there is a way to access a variable or function of an object that has been added to an array. I want to display all the objects in the array on a web page using a function that will return a string containing their content. Thi ...

javascripthtml

Is it possible to continuously loop and gradually fade the same image URL using JavaScript?

I have a dynamic image stored on my web server at example.com/webcam.jpg that is continuously updated by the server. My goal is to display this image on a static HTML page with a looping effect that smoothly transitions from the previous image to the upda ...

javascriptjqueryhtmlajaxxmlhttprequest

Group all 3 elements with a wrapper

I'm facing a challenge in trying to enclose 3 divs inside one wrapping div. I have successfully wrapped up 2 divs, but the third one is proving to be difficult. To see my progress so far, you can check out my JSFiddle here: http://jsfiddle.net/cz9eY/ ...

javascriptjqueryhtmlwrapall

Transmit a communication from a customer to the server

I have created a NodeJs server that is listening on port 1234. I am looking to send requests from my HTML client to this server and receive responses. I attempted to use XMLHttpRequest: var http = new XMLHttpRequest(); var url = "127.0.0. ...

htmlnode.jsclient-server

How can I rectify the incorrect return value of the base64 src value for an Img object in a Next.js API?

I am currently working on the backend of a project that does not have a frontend, and I am facing challenges with base64 encoding for images! In my Next.js app, I have an array containing images from the public folder stored in a separate file. I have two ...

imagenext.jsbase64

Customizing the appearance of the 'Submit' button compared to the <a href=""></a> button using CSS

I am experiencing some issues. Even though the CSS code for these two buttons is exactly the same, their appearance is different. I am unable to make the :hover or :active effects work either. My goal is to have the left 'input type="submit' but ...

htmlcssinputform-submitappearance

Autocomplete feature seems to be functioning properly in the online demonstration, while it does not seem

I can see that the autocomplete feature is working in the example provided, but it's not functioning properly in my attempt. What could be causing this issue? <!doctype html> <html lang="en"> <head> <meta charset="utf-8> & ...

javascriptjquerycssjquery-ui

Dynamic React animation with sliding elements

When jumping between the second and third "page" of content, I am unable to determine the reason why it is happening. The content is displayed as an absolute position. Check out the sandbox here: https://codesandbox.io/s/nostalgic-bhabha-d1dloy?file=/src ...

cssreactjscss-animationsreact-transition-group

Flex items in the center are getting truncated when viewed on a smaller screen size

I have a group of divs in my list, here's an example: .container { display: flex; flex-direction: row; justify-content: center; } When the container is larger than the viewport upon resizing, the first/second items get clipped off. I would like ...

htmlcssflexbox

Bootstrap 5 utilizes an 8-column system specifically designed for tablets, while defaulting to a 12-column system for both desktop and mobile versions

Currently, I am utilizing the Bootstrap grid system with its 12-column setup, which is working well. However, my designer has requested that I make the Tablet view an 8-column system, with each column taking up 100% of the width and no gutters in between. ...

csstwitter-bootstrapbootstrap-5

The hover function stops working once the dropdown class has been removed

I am currently experimenting with a bootstrap template. In the navigation bar, there is an option for "Blog" and "Test". For the "Test" button, I decided to remove the li class="dropdown " because I wanted to create a button that changes color on hover si ...

htmlcss

Modify jQuery to update the background image of a data attribute when hovering over it

Something seems to be off with this topic. I am attempting to hover over a link and change the background image of a div element. The goal is to always display a different picture based on what is set in the data-rhomboid-img attribute. <div id="img- ...

javascriptjqueryhtmlcssmouseover

execute the function whenever the variable undergoes a change

<script> function updateVariable(value){ document.getElementById("demo").innerHTML=value; } </script> Script to update variable on click <?php $numbers=array(0,1,2,3,4,5); $count=sizeof($numbers); echo'<div class="navbox"> ...

phpjavascripthtmlcss

Initiating a click function for hyperlink navigation

Here is the HTML and JavaScript code that I am currently working with: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <a href="#f ...

javascriptjqueryhtmlcss

Node JS login leads to fetching /favicon.ico

I've implemented a login/register system using express (passport) on my website. I'm facing an issue where after the user logs in, they are redirected to /favicon.ico instead of the saved originalUrl. Can anyone help me identify what might be cau ...

htmlnode.jsexpresshttp-redirectfavicon

Enhancing the appearance of HTML code within x-template script tags in Sublime Text 3 with syntax highlighting

I recently updated to the latest version of sublime text (Version 3.1.1 Build 3176) and have encountered a problem with syntax highlighting for HTML code inside script tags. Just to provide some context, I'm using x-template scripts to build Vue.js c ...

javascripthtmlvue.jssublimetext3syntax-highlighting

The importance of CSS style prioritization

I can't seem to figure out CSS declaration priority. I have an external CSS file with a rule and some inline CSS declarations that are supposed to override it. According to my understanding, inline styles should take precedence over external CSS rules ...

htmlcsscss-selectors

Is there a way to retrieve the :hover css style of an anchor using jQuery?

Is it possible to dynamically add :hover effects using jQuery in a CSS stylesheet? Here is a basic example: a.bar { color: green; font-size: 13px; } a.bar:hover { color: purple; font-size: 14px; } How can one access the color and font- ...

jquerycsshoveranchor