CODEWITHSUNDEEP
htmlcss
Rick
Rick

Reputation: 541

Resize the width of the <li> to fit <ul> using inline

I want to make the li auto resize the width to make it perfectly fit on the ul regardless the screen size.

Here is the demo http://jsfiddle.net/y3bjokwx/

CSS:

ul {
  overflow: scroll;
  overflow-x:hidden;
  height: 100px;
}

li{
  display: inline-block;
  width:60px;
  height:60px; 
}

img{
  width:100%;
  height:100%;
}

HTML:

<ul>
     <li > <!-- over 1000 images -->
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
</ul>

Below image is not something I want, as there is still have space between the images and scrollbar Not fit

Below image is what I want to achieve. It will automatically resize the width to fit the width of the ul regardless of the screen size.

Fit

Upvotes: 0

Views: 1085

Answers (3)

vssadineni
vssadineni

Reputation: 454

Do not know why the width of the li is absolute to 60px, but I think at smaller screen size the image should be little bigger. so below is the code. Hope it would help.

ul {
  overflow: scroll;
  overflow-x: hidden;
  display: flex;
  flex-flow: row wrap;
  flex-basis: 100%;
  margin: 0;
  padding: 0;
}

li {
  display: flex;
  flex-flow: row wrap;
  margin: calc(0.125em/2);
  box-sizing: border-box;
  flex-basis: 100%;
  transition: all 1.4s ease-in-out;
}

@media screen and (min-width:1600px) and (max-width:1920px) {
  li {
    min-width: calc((100%/12) - 0.125em);
    max-width: calc((100%/12) - 0.125em);
    min-height: calc((100%/12) - 0.125em);
    max-height: calc((100%/12) - 0.125em);
  }
}

@media screen and (min-width:1280px) and (max-width:1599px) {
  li {
    min-width: calc((100%/10) - 0.125em);
    max-width: calc((100%/10) - 0.125em);
    min-height: calc((100%/10) - 0.125em);
    max-height: calc((100%/10) - 0.125em);
  }
}

@media screen and (min-width:1024px) and (max-width:1279px) {
  li {
    min-width: calc((100%/8) - 0.125em);
    max-width: calc((100%/8) - 0.125em);
    min-height: calc((100%/8) - 0.125em);
    max-height: calc((100%/8) - 0.125em);
  }
}

@media screen and (min-width:320px) and (max-width:1023px) {
  li {
    min-width: calc((100%/3) - 0.125em);
    max-width: calc((100%/3) - 0.125em);
    min-height: calc((100%/3) - 0.125em);
    max-height: calc((100%/3) - 0.125em);
  }
}

img {
  width: 100%;
  height: 100%;
}
<ul>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
  <li>
    <img src="https://www.w3schools.com/w3css/img_lights.jpg">
  </li>
</ul>

Upvotes: -1

Piyush Teraiya
Piyush Teraiya

Reputation: 747

You can use this code

body {
            margin: 0;
            padding: 0;
        }        
        ul {
            padding: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
            grid-auto-rows: 1fr;
            grid-gap: 8px;
        }        
        li {
            display: inline-block;
            width: 60px;
            height: 60px;
        }        
        img {
            width: 60px;
            height: 60px;
        }
<ul>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
        <li>
            <img src="https://www.w3schools.com/w3css/img_lights.jpg">
        </li>
    </ul>

Upvotes: 0

Janis Jansen
Janis Jansen

Reputation: 1025

I would use a flexible CSS grid.

ul {
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    grid-auto-rows: 1fr;
    grid-gap: 8px;
}

li{
    display: inline-block;
    height:60px;
    
}

img{
  width:100%;
  height:100%;
}
<ul>
      <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
     <li >
              <img src="https://www.w3schools.com/w3css/img_lights.jpg">
     </li>
</ul>

With these changes you will automatically fit the pictures in a row and scale them above 60px width if there is enaugh space.

Upvotes: 4

Related Questions