Home/ Questions/Q 8588593
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T22:50:30+00:00

I have a horizontal layout with width: auto and height: 100%, but the body

  • 0

I have a horizontal layout with width: auto and height: 100%, but the body or container doesn’t stretch to keep the aspect ration of my image.

I need the layout to be like this seen in this attached image:

enter image description here

I will use these images as a background of the panel divs.

Here is my code:

HTML

 <body>
      <div id="cover" class="panel">
      <img src=""/>
      </div>
      <div id="panel1" class="panel">
      <img src=""/>
      </div>
      <div id="panel2" class="panel">
      <img src=""/>
      </div>
      <div id="panel3" class="panel">
      <img src=""/>
      </div>
      <div id="panel4" class="panel">
      <img src=""/>
      </div>
 </body>

CSS

* {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    width: auto;
    height: 100%;
}

.panel {
    width: auto;
    height: 100%;
    float: left;
}

.panel img {
    width: auto;
    height: 100%;
    z-index: -1;
}

You can also see it at this jsfiddle.

I floated the .panel to the left so it will display it all horizontally, but the container is not accomodating the width of all the panels, they just stack on top of each other.

Note: I don’t want to have a fixed with, I need it to be responsive.

Here’s an example of what I want to accomplish (jsfiddle).

As you can see there’s no vertical scrollbar only the horizontal scrollbar is showing and when you resize the viewport the images adjust its width and height and keeps its aspect ratio.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s an update of your original fiddle:
    http://jsfiddle.net/rsPRz/45/

    Trying to stay as close to your original code as possible…

    HTML

    <html>
<body>
    <img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-cover.jpg"
    /><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-2.jpg"
    /><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-left-1.jpg"
    /><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-1.jpg"
    /><img src="http://i978.photobucket.com/albums/ae265/horizoncars/lambo-right-2.jpg"/>
</body>
</html>

    CSS

    * {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space:nowrap;
}

img {
    display: inline-block;
}
    • 0