How come the size of an image does not adjust in a predetermined list?

My goal is to create a basic gallery.
I have specified the width and height of li and the size of img, but it's not working as expected.
I want all images to be the same sizes.
What am I missing in my code?

body
{
  margin: 0;
  padding: 0;
  background-color: #fff;
  color: black;
  font-family: sans-serif, Arial;
  font-size: 15px;
  line-height: 1.5;
  
}

.container
{
  max-width: 1200px;
  margin: auto;
}

.container a
{
  background: #ccc;
  color: #666;
  text-decoration: none;
  padding: 10px;
  border-radius: 20px;
  padding-left: 20px;
  padding-right: 20px;
  display: inline-block;
  transition: background 0.5s, color 0,5s;
}

.container a:hover
{
  background: #aaa;
  color: #fff;
}
main 
{
  background: #111;
  padding: 25px;
  width: 100%;
  float: left;
  box-sizing: border-box;
}


/*Gallery*/

.gallery 
{
  background: #999;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 25px;
  display: block;
  width: 100%;
}

.gallery li
{
  background: red;
  width: 31%;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  height: 175px;
  
}

.gallery img
{
  background: blue;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


.container .gallery a
{
  background: transparent;
  padding: 0;
  display: block;
  width: 100%;
}
<!DOCTYPE html>
<html>
  <head>
    <meta lang="hu">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="res/teszt.css">
    <title>test</title>
  </head>
  <body>
    
    <!-- HEADER -->
    
  <div class="container">
      <main>
        <ul class="gallery">
          <li>
            <a href="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" target="_blank">
              <img src="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" alt="">
              <span>lorem ipsim</span>
            </a>
          </li>
          <li>
            <a href="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" target="_blank">
              <img src="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" alt="">
              <span>lorem ipsim</span>
            </a>
          </li>
          <li>
            <a href="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" target="_blank">
              <img src="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" alt="">
              <span>lorem ipsim</span>
            </a>
          </li>
          <li>
            <a href="https://wallpaperaccess.com/full/255959.jpg" target="_blank">
              <img src="https://wallpaperaccess.com/full/255959.jpg" alt="">
              <span>lorem ipsim</span>
            </a>
          </li>
          <li>
            <a href="https://wallpapercave.com/wp/wp4013939.jpg" target="_blank">
              <img src="https://wallpapercave.com/wp/wp4013939.jpg" alt="">
              <span>lorem ipsim</span>
            </a>
          </li>
          <li>
            <a href="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" target="_blank">
              <img src="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" alt="">
              <span>lorem ipsim</span>
            </a>
          </li>
        </ul>
      </main>

    </div>
    
  </body>


</html>

htmlcss

Answer №1

To activate image display, simply assign specific height and width values.

body
{
  margin: 0;
  padding: 0;
  background-color: #fff;
  color: black;
  font-family: sans-serif, Arial;
  font-size: 15px;
  line-height: 1.5;
  
}

.container
{
  max-width: 1200px;
  margin: auto;
}

.container a
{
  background: #ccc;
  color: #666;
  text-decoration: none;
  padding: 10px;
  border-radius: 20px;
  padding-left: 20px;
  padding-right: 20px;
  display: inline-block;
  transition: background 0.5s, color 0,5s;
}

.container a:hover
{
  background: #aaa;
  color: #fff;
}
main 
{
  background: #111;
  padding: 25px;
  width: 100%;
  float: left;
  box-sizing: border-box;
}


/*Gallery*/

.gallery 
{
  background: #999;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 25px;
  display: block;
  width: 100%;
}

.gallery li
{
  background: red;
  width: 31%;
  float: left;
  margin-left: 1%;
  margin-right: 1%;
  height: 175px;
  
}

.gallery img
{
  background: blue;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}


.container .gallery a
{
  background: transparent;
  padding: 0;
  display: block;
  height: 200px;
  width: 100%; 
  background-size: cover;


  
}
<!DOCTYPE html>
<html>
  <head>
    <meta lang="hu">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="res/teszt.css">
    <title>test</title>
  </head>
  <body>
    
    <!-- HEADER -->
    
  <div class="container">
      <main>
        <ul class="gallery">
          <li>
            <a href="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" target="_blank">
              <img src="https://cdn.wallpapersafari.com/29/92/9VWQiO.jpg" alt="">
              <span>lorem ipsim</span>
            </a>
          </li>
          <li>
            <a href="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" target="_blank">
              <img src="https://upload.wikimedia.org/wikipedia/commons/a/a2/1121098-pink-nature-wallpaper-1920x1080-lockscreen.jpg" alt="">
              <span>lorem ipsim</span>
            </a>
          </li>
          <li>
            <a href="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" target="_blank">
              <img src="https://images.template.net/wp-content/uploads/2016/04/27043339/Nature-Wallpaper1.jpg" alt="">
              <span>lorem ipsim</span>
            </a>
          </li>
          <li>
            <a href="https://wallpaperaccess.com/full/255959.jpg" target="_blank">
              <img src="https://wallpaperaccess.com/full/255959.jpg" alt="">
              <span>lorem ipsim</span>
            </a>
          </li>
          <li>
            <a href="https://wallpapercave.com/wp/wp4013939.jpg" target="_blank">
              <img src="https://wallpapercave.com/wp/wp4013939.jpg" alt="">
              <span>lorem ipsim</span>
            </a>
          </li>
          <li>
            <a href="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" target="_blank">
              <img src="https://images.hdqwalls.com/wallpapers/best-nature-image.jpg" alt="">
              <span>lorem ipsim</span>
            </a>
          </li>
        </ul>
      </main>

    </div>
    
  </body>


</html>

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

Enhanced Bootstrap 4 Navigation Bar Lofty on Tablet Display with Divided Functionality

Currently, I am utilizing Bootstrap 4 for my personal website; however, I have encountered an issue on my tablet where the top menu is divided into two lines: The top row displays the "font awesome" icon Directly below each icon are the section names co ...

javascriptcssbootstrap-4font-awesomenav

JavaScript code for submitting form input values

Recently, I encountered an issue on my PHP page where I handle password change requests. I am struggling to implement a Javascript function that checks if the new password contains at least one special character before proceeding to update the database fie ...

javascriptphphtmlajaxforms

Obtain the outcome of HTML5 FileReader by utilizing promises within an asynchronous function

I am encountering a challenge in my Angular 4 application where I am working with an image. I am trying to pass the base64 string to another variable, but due to the asynchronous nature of this process, the image.src ends up being empty. As a result, the ...

angularhtmltypescriptes6-promisephotoeditorsdk

Is there a way to achieve the same zooming and panning effects on an element using CSS transform instead of jQuery's

If you click on the following link, you will see a jsFiddle that I have created to demonstrate my question: http://jsfiddle.net/VbCcA/3/ In my project, I have developed a function that allows for panning and zooming to a specific element. This function i ...

jquerycssjquery-animatecss-transforms

The hover functionality fails to activate when a z-index is applied

My issue revolves around 2 divs: one containing a link and the other a box-shaped container. The link is set with position:fixed; causing it to fly over the container div. To resolve this, I attempted to assign a negative z-index value to the link, but unf ...

javascriptjqueryhtmlcss

Configure the input to accept integer values

This page that I have developed is designed for entering Latitude and Longitude values. <div class="container "> <form class="entry"> <div class="aligncenter"> <h5 style="color:MediumTurquoise; font ...

javascriptjqueryhtmlcssjson

Converting RGB color values to HSL color values using a unique, randomized Javascript approach

On this site, I have added a random color overlay to the media-boxes. Check it out here Thanks to the helpful folks at stackoverflow, I was able to create this script: var getRandomInRange = function(min, max) { return Math.floor(Math.random() * (ma ...

javascriptcssrandomrgbhsl

Is there a way to eliminate the additional gap found at the bottom of a div element?

I've been encountering some difficulty when trying to insert an image into a div without any padding. The issue I'm facing is that the sizing doesn't seem to be correct; there's unnecessary extra space at the bottom. Despite my efforts ...

htmlcss

Adding the </tr> element to a table does not seem to be registering

I encountered an issue with my table that was prepopulated with JSON data while attempting to add collapsibles between specific rows. Strangely, I found myself unable to properly insert a closing tag to start a new row. The insertion kept happening in an u ...

jquerycsshtml-table

What are the reasons behind my item not triggering an alert even after I have created it, saved it, and attempted to alert it?

I am currently working on a code that allows users to input information which is then stored in an object. However, despite my efforts, when I attempt to retrieve the saved object by alerting one of its values, it indicates that the object does not exist. ...

javascripthtmlobject

Issue with rendering in sandbox environment versus localhost

Here's a dilemma I'm facing - I have some HTML code on my localhost that looks like this: <div> <p>Go to: <a href="www.foobar.com">here</a></p> </div> On localhost, the output is "Go to: here" with 'he ...

javascripthtmlcssdeployment

Is there a way to seamlessly transition between different Angular components without having to refresh the entire webpage?

I'm currently working on implementing a navigation bar that allows users to switch between three components without having the navbar reload. The goal is for only the new component to load when the user clicks on a different section of the navbar, kee ...

htmlangulartypescriptcomponents

What is the alternative method for submitting a value in a <select><option> without using a submit button?

Below is the code snippet I am working with: <form action="?sort=SELECTEDVALUEHERE" method="GET> <select> <option value="1">Option 1 </option> <option value="2">Option 2 </option> <option value="3">Option 3 < ...

javascriptphpjqueryhtmlforms

How to effectively position a div in CSS into two columns

I am currently facing an issue with positioning a div when one post contains a lot of text. The div seems to be expanding to accommodate the extra text, causing layout problems. You can view my code here. HTML <div class="container"> <div> ...

htmlcss

Avoiding ContentPlaceHolder in the creation of ID tags

Recently, I successfully integrated a master page to manage all my sub pages in an older project. In order for the sub pages to render correctly, I had to insert <asp:content id="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> i ...

javascripthtmlasp.netvb.netmaster-pages

Guide to placing an image in a designated position

I am looking to achieve the following scenario: Whenever a user uploads an image, it should appear in one of the smaller boxes on the right. Subsequent image uploads by clicking on the big box should populate the other small boxes on the right. Please refe ...

javascripthtmlimage

Issue with submitting input fields that were dynamically added using jquery

I created a table where clicking on a td converts it into an input field with both name and value. The input fields are successfully generated, but they do not get submitted along with the form. In my HTML/PHP : <tr> <f ...

javascriptphpjqueryhtmlforms

What is the best way to style HTML content with MathJax following its retrieval with jQuery.load?

I recently encountered an issue while using jQuery.load to load a new page. The content on the original page is being treated strangely in some way. Specifically, I have code on the original page that formats LaTeX commands with MathJax: <script type=" ...

javascriptjqueryhtmlmathjax

What is the process of uploading a video and showcasing it on an HTML page?

I have successfully uploaded images and displayed them on an HTML page. Now, I am looking to do the same for videos. Here is my current code: $('#addPhotosBtn').click(function() { $(this).parents().find('#addPhotosInput').click(); }) ...

javascripthtmljquerycss

Changing the color of buttons within the anchor and menu-separator classes in WordPress

https://i.sstatic.net/lYs6O.png Hi everyone, I'm new to WordPress and need help changing a green button to blue. I have found the button in an anchor tag with the class "menu-separator." Is there a way for me to write custom CSS to change its color? ...

htmlcsswordpress