Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to fit 10 images in a full screen row for any resolution maintaining 4:3 aspect ratio

Tags:

html

css

Hi i want to fit 10 images into a full screen width row maintaining 4:3 aspect ratio

Question: i want to fit exactly 10 images into a full width row keeping aspect ratio 4:3 of images

Note: my use case is for storyboard which will not have any spacing between images

here is how my current code rendering

enter image description here

here is what i have tried

ul {
  height: 100%;
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

li {
  height: 100%;
  display: flex;
  list-style: none;
  justify-content: center;
}

img {
  width: 100%;
  height: 100%;
}
<div style="width:100vw;height:71px;border:1px solid red;">
  <ul>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
  </ul>
</div>

please help me thanks in advance!!

like image 377
EaBengaluru Avatar asked Oct 15 '21 07:10

EaBengaluru

6 Answers

You can use grid property for ul, aspect-ratio for li and object-fit property for img:

body, html {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
}

* {
    box-sizing: border-box;
}

.root {
    width: 100%;
    border: 1px solid red;
}

ul {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    padding: 8px;
    margin: 0;
}

li {
    list-style-type: none;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    border: 1px solid green;
}

img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}
<div class="root">
      <ul>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
          />
        </li>
      </ul>
    </div>

    <h3 style="margin-top: 24px; margin-bottom: 0;">if you just set width: 100% for image</h3>
    <div class="root">
      <ul>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
            style="height: unset"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
            style="height: unset"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
            style="height: unset"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
            style="height: unset"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
            style="height: unset"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
            style="height: unset"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
            style="height: unset"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
            style="height: unset"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
            style="height: unset"
          />
        </li>
        <li>
          <img
            src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"
            style="height: unset"
          />
        </li>
      </ul>
    </div>
like image 145
Mohsen007 Avatar answered Oct 22 '22 03:10

Mohsen007

You can use aspect-ratio: 4 / 3; property and for image need to use object-fit: cover; property for cover the size of li element.

2nd Scope: If you remove height: 71px; from parent element then each image will render as aspect-ratio: 4:3

Helpful Link:
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

*{box-sizing: border-box;}
body{
    margin: 0;
    padding: 0;
}
ul {
    height: 100%;
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}
li {
    width: 10%;
    display: flex;
    list-style: none;
    justify-content: center;
    aspect-ratio: 4 / 3;
}
img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    object-fit: cover;
}
<div style="width:100vw; height: 71px; border:1px solid red;">
    <ul>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
    </ul>
</div>
<br>
If you remove `height: 71px;` from parent element then each image will render as aspect-ratio: 4:3
<div style="width:100vw; border:1px solid red;">
    <ul>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
    </ul>
</div>
like image 5
Raeesh Alam Avatar answered Oct 22 '22 03:10

Raeesh Alam

Here I have removed height: 71px; from parent element and add one div above the image.

and here I have used padding-top: 75%(4:3) instead of aspect-ratio property.

*{box-sizing: border-box;}
body{
    margin: 0;
    padding: 0;
}
ul {
    height: 100%;
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}
li {
    width: 10%;
    display: flex;
    list-style: none;
    justify-content: center;
}
img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    object-fit: cover;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.aspect-ratio-4by3 {
   position: relative;
   padding-top: 75%;
   width: 100%;
}
<div style="width:100vw; border:1px solid red;">
    <ul>
       <li>
          <div class="aspect-ratio-4by3">
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
          </div>
        </li>
        <li>
          <div class="aspect-ratio-4by3">
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
          </div>
        </li>
        <li>
          <div class="aspect-ratio-4by3">
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
          </div>
        </li>
        <li>
          <div class="aspect-ratio-4by3">
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
          </div>
        </li>
        <li>
          <div class="aspect-ratio-4by3">
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
          </div>
        </li>
        <li>
          <div class="aspect-ratio-4by3">
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
          </div>
        </li>
        <li>
          <div class="aspect-ratio-4by3">
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
          </div>
        </li>
        <li>
          <div class="aspect-ratio-4by3">
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
          </div>
        </li>
        <li>
          <div class="aspect-ratio-4by3">
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
          </div>
        </li>
        <li>
          <div class="aspect-ratio-4by3">
            <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
          </div>
        </li>
       
    </ul>
</div>
like image 3
Janki Gandhi Avatar answered Oct 22 '22 01:10

Janki Gandhi

If your height is fixed to 71px then width has to be 95px to maintain the aspect ratio 4:3.
We nee to fix parents, li, size to 95 x 71px and stretch images to fit in it:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container {
        width: 100vw;
        height: 71px;
        border: 1px solid red;
      }
      ul {
        height: 100%;
        list-style: none;
        display: flex;
        padding: 0;
        margin: 0;
      }

      li {
        width: 95px; /* fix the width */
        display: flex;
        list-style: none;
        justify-content: space-evenly;
      }

      img {
        aspect-ratio: 4/3;
        object-fit: fill; /* fit the content in 95 x 71 box */
      }
    </style>
  </head>

  <body>
    <div id="container">
      <ul>
        <li>
          <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
          <img
            src="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/object-fit/mdn_logo_only_color.png"
          />
        </li>
        <li>
          <img
            src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg"
          />
        </li>
        <li>
          <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
          <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
          <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
          <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
          <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
          <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
          <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
      </ul>
    </div>
  </body>
</html>

If you put any image in it, it'll stretch to fit in 95x71px box. So for any image the browser will show aspect ratio 95:71 which is ~ 4:3.

Evenly spaced content:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container {
        width: 100vw;
        height: 71px;
        border: 1px solid red;
      }
      ul {
        height: 100%;
        list-style: none;
        display: flex;
        padding: 0;
        margin: 0;
        justify-content: space-evenly;
      }

      li {
        width: 95px; /* fix the width */
        display: flex;
        list-style: none;
        justify-content: center;
      }

      img {
        aspect-ratio: 4/3;
        object-fit: fill; /* fit the content in 95 x 71 box */
      }
    </style>
  </head>

  <body>
    <div id="container">
      <ul>
        <li>
          <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
          <img
            src="https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/object-fit/mdn_logo_only_color.png"
          />
        </li>
        <li>
          <img
            src="https://interactive-examples.mdn.mozilla.net/media/examples/plumeria.jpg"
          />
        </li>
        <li>
          <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
          <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
          <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
          <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
          <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
          <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
        <li>
          <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png" />
        </li>
      </ul>
    </div>
  </body>
</html>
like image 3
the Hutt Avatar answered Oct 22 '22 01:10

the Hutt

You can do it by using aspect-ratio property and background-image property.

  1. aspect-ratio

ul {
  width: 100%;
  list-style: none;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}

li {
  width: 10%;
  display: flex;
  list-style: none;
  justify-content: center;
}

img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
<div style="border:1px solid red;">
  <ul>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
  </ul>
</div>

2.background-image

ul {
  width: 100%;
  list-style: none;
  display: flex;
  align-items: flex-start;
  padding: 0;
  margin: 0;
}

li {
  width: 10%;
  padding-top: 7.5%;
  background-image: url('https://i.ibb.co/qy7h4qk/Screenshot-from-2021-10-15-12-09-31.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
<div style="border:1px solid red;">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

This is 2nd code run result.
2nd code run result
As you can see, image width is 61.5px, and height is 46.125px.
Aspect ratio is 4:3.

like image 2
Sato Takeru Avatar answered Oct 22 '22 01:10

Sato Takeru

 

ul {
  height: 100%;
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
}

li {
  padding: 0;
  margin: 0;
  width:10%;
  list-style: none;
  justify-content: center;
}

img {
  max-width: 100%;
  max-height: 75%;

}
<div style="width:100vw;height:71px;border:1px solid red;">
  <ul>
    <li>
      <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
    <li>
      <img src="https://i.ibb.co/N1nyZZb/Screenshot-from-2021-10-15-12-09-31.png"/>
    </li>
  </ul>
</div>

use width 10% for split into 10 phase and for 4:3 ratio change img css max-height:75% & max-width:100%

like image 1
sathish Avatar answered Oct 22 '22 01:10

sathish
Sign in to Comment

Related questions

Expand div on click with smooth animation
Evenly Space DIVs Vertically
HTML/CSS - linear gradient not taking up full screen
How to do Modal Bootstrap appear on bottom
jquery - remove class based on condition
How do I divide a page in three vertical sections?
Bootstrap same width for labels
Bootstrap accordion with arrows
Direction rtl to all page
Can I make an ellipse using the CSS border-radius property?
How to re-flow a div depending on device width with flexbox?
Vertically center multiple lines of flex items
Fullscreen svg similar to object-fit cover
Freeze first row and first column of table
Why are duplicate ids not allowed in HTML
Cannot remove bootstrap button border
Materialize material_select is not a function error
React - zIndex does not work
Indicators (dots) with CSS scroll snap
What does the isVisible property mean in intersectionObeserver API?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!