locked
Percentage Height Without Pixel Width And How To Maintain Image Aspect Ratio RRS feed

  • Question

  • User1231829591 posted

    I have a responsive web page where there are a large DIV in the middle of the page and a horizontal unordered list below it. Inside this unordered list are thumbnails and when each of the thumbnails is clicked, a large version of it is displayed in the large DIV. I want my web page to shrink/stretch when the page resolution changes so I did not set the width or height of any page elements using pixels. Below are my media query and markup:

    media screen and (min-width: 320px) {
       html, body{width:100%;height:100%;}
       #banner{width:100%;height:10%; border:1px solid blue}
       #largeImage{width:100%;height:70%; border:1px solid blue}
       #picsContainer{width:100%;height:10%; border:1px solid blue}
       img{width:100%;height:auto}
       ul{list-style:none}
       ul li{width:10%;height:100%; display:inline-block; border:1px solid blue}
       footer{width:100%;height:10%;border:1px solid blue}
     }
     
    --------------------------------------------------------------------------------------------
    <body>
            <div id="banner"></div>
            <div id="largeImage"><img src="pic/placeHolder.jpg" alt="image"/></div>
            <div id="picsContainer">
                <ul>
                    <li><img src="pic/img1.jpg" alt="image1"/></li>
                    <li><img src="pic/img2.jpg" alt="image2"/></li>
                    <li><img src="pic/img3.jpg" alt="image3"/></li>
                    <li><img src="pic/img4.jpg" alt="image4"/></li>
                    <li><img src="pic/img5.jpg" alt="image5"/></li>
                    <li><img src="pic/img6.jpg" alt="image6"/></li>                
                </ul>
            </div>
            <footer>
               Footer
            </footer>
    </body>

    I only have a couple questions.

    1 - How do I get height:100% to work on ul li elements without giving a pixel width to their parent or grand parent?
    2 - How do I maintain aspect ratio of images inside li elements?

    Monday, October 2, 2017 11:48 PM

All replies

  • User-1838255255 posted

    Hi ManyTitles,

    According to your description, as far as i know, it will get the window's width, then multiply the percentage, it will get the respond width. So you could aspect ratio by percentage. 

    I think you want to make a image slider, i suggest you use responsive image slider, it could suit to all width devices, also could keep aspect ratio when shrink or expand window, here are some samples about your needs, please check: 

    Responsive CSS Image Slider: 

    https://codepen.io/dudleystorey/pen/ehKpi 

    Responsive Image Slideshow, touch-enabled and mobile-friendly: 

    http://www.menucool.com/responsive-slider 

    Best Regards,

    Eric Du 

    Tuesday, October 3, 2017 6:03 AM
  • User1231829591 posted

    Hi Eric, thanks for replying. I was experimenting with pixelless layout and not really thinking about creating any particular functionality. I'm just trying to pin down this concept of defining the page width and height using percentages instead of pixels in order to create a fluid layout.

    Thus far I struggled to make it work; when I define the page width and height using percentages, the child elements which inherit from the body element, do not have any height. I can see their widths due to their borders but I do not see their heights. In the html markup that I've posted above, the percent height does not work and the li elements do not have any visible height.

    Thursday, October 5, 2017 3:27 AM
  • User-474980206 posted

    percent heights and widths only work if the parent has a specified height. also unless an overflow property is set, a child is not constrained by it parent:

    <div style="width:100px;height:100px;background-color:blue">
      <div style="width:50%;height:200px;background-color:green">
      </div>
    </div>

    to maintain aspect ratio, you only set the width or the height, not both.

    by default the html and body width and height are auto, so 100% on an element, will not do anything because no parent has a specified height. 

    Thursday, October 5, 2017 4:52 PM
  • User1231829591 posted

    Hi Bruce, thanks for responding. I remember reading somewhere that by setting the min-width/max-width in the media query, the width of the body element will be equal to the width of the window as the user expands or shrinks the screen without using javascript.

    So that is the reason why I thought that anything that inherits from the body element will have a height and a width without having to have them explicitly defined using pixel. Please let me know if that is incorrect, thanks.

    Monday, October 9, 2017 2:30 AM
  • User-1838255255 posted

    Hi ManyTitles,

    According to your description and issue, about how to set tag li height, please check the following sample code:

    Sample Code:

    <head>
        <title></title>
        <style type="text/css" media="screen">
            #header {
                width: 40%;
                height: 100px;
                background-color: #f0f0f0;
                border: 1px solid red;
            }
    
                #header ul {
                    height: 90%;
                    margin: 0;
                    padding: 0;
                    font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
                    border: 1px solid black;
                }
    
                    #header ul li {
                        height: 30%;
                        display: block;
                        border: 1px solid blue;
                    }
        </style>
    </head>
    <body>
        <div id="header">
            <ul>
                <li><a href="#">Item </a></li>
                <li><a href="#">Item </a></li>
                <li><a href="#">Item </a></li>
            </ul>
        </div>
    </body>

    Result:

    Best Regards,

    Eric Du

    Tuesday, October 17, 2017 12:26 PM