0

I' trying to make a horizontal menu with special conditions these are the rules I have to stick with:

  • html + css
  • menu should resize to the width of the container (100% of container). so the wider the container the bigger (height, width) the menu
  • menu elements are images with different width
  • every image(menu element) is close to the next and previous (no gaps in between)
  • all dimensions should be expressed in % (no fixed size)

the code:

<div id="menu-container">
    <ul>
        <li><a href="#"><img src="myImg01"></a></li>
        <li><a href="#"><img src="myImg02"></a></li>
        <li><a href="#"><img src="myImg03"></a></li>
    </ul>
</div>

css

#menu-container{
    width:100%;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: table;
}
li {
    display: table-cell;
}
li img{
    width:100%;
}

this works in firefox and safari does not in chrome and similar... (it seems like all images are scaled in different %) I've searched and did not found a similar issue could you help please?

Will try to clarify. I need that all images retain their aspect ratio even after scaling enter image description here

BlurredPixels
  • 11
  • 1

3 Answers3

0

you should add max-width in your div , and make display flex wrap

Faiq Rustamov
  • 11
  • 1
  • 5
0

hay I hope this example will be helpful, so try like this:

CSS

#menu-container{
    width:100%;
    border: 1px solid red;
}

ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    list-style-type: none;
}
li {
   width: 10%;
   height: 0;
   padding-bottom: 10%;
   background-repeat: no-repeat;
   /*background-size: contain;*/
   background-size: cover;
   background-position: center center;
}

li a {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%; 
}

HTML

<div id="menu-container">
    <ul>
        <li style="background-image: url(https://static.scientificamerican.com/sciam/cache/file/4E0744CD-793A-4EF8-B550B54F7F2C4406_source.jpg);">
            <a href="#"></a>
        </li>
         <li style="background-image: url(https://www.afd.fr/sites/afd/files/styles/visuel_principal/public/2019-01-07-16-19/mangrove%20couv.jpg);">
            <a href="#"></a>
        </li>
         <li style="background-image: url(https://blog.nationalgeographic.org/wp-content/uploads/2020/05/May-11_Dorset-heathland_shutterstock_1332881306_sml-1140x450.jpg);">
            <a href="#"></a>
        </li>
    </ul>
</div>
davit tskhvariashvili
  • 85
  • 1
  • 6
  • thankyou for your quick reply unfortunatly I need tha images to keep their aspect ratio and occupy all the width of the container I try to make li width 100% and they fill the container but aspect ratio is wrong – BlurredPixels Feb 22 '21 at 14:41
0

You can CSS grid.

#menu-container {
   width:100%;
}

ul.menu {
   display: grid;
   grid-template-columns: 1fr 25% 2fr; // You can use percentages or the fr unit  It represents a fraction of the available space in the grid container (works like Flexbox’s unitless values).
   list-style-type: none;
   margin: 0;
   padding: 0;
}
Amoy N
  • 11
  • 1
  • 5
  • I'd like not to have to specify images width. they are alot and subject to be changed often. – BlurredPixels Feb 22 '21 at 15:16
  • In that case use "grid-template-columns: 1fr;" or a percentage and it will resize according to the space. – Amoy N Feb 23 '21 at 13:29
  • I need every image in the menu to be scaled the same amount respecting their aspect ratio images will be added dinamically so it's very difficult to set their % space beforehand – BlurredPixels Feb 24 '21 at 10:24
  • You can use object-fit on the image see a similar answer here https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio – Amoy N Feb 25 '21 at 13:43