CODEWITHSUNDEEP
htmlimagecssresponsive-design
Joe Bauer
Joe Bauer

Reputation: 622

Why is my image ignoring the size (height) of its containing element?

I have a ul of imgs to create a side-scrolling gallery.

I'd like for the images' height to be constrained to the browser window and their width to resize in order to maintain their scale.

Even though I've specified a height for every containing element, the images with height:90%; are way bigger than the browser window. See the fiddle here: JSFiddle

What am I doing wrong here?

Additional info: If I set height: 90vh; on .gallery-image it looks pretty much exactly how I want it, but it feels like a hack and I'd like to understand why % isn't working.

I'm looking to achieve this functionality: example.

Upvotes: 0

Views: 1837

Answers (5)

Extra Pulp
Extra Pulp

Reputation: 26

This might be what your looking for?

http://jsfiddle.net/jny0u3rc/11/

I simplified the code, this might not work if you have to have the images loaded in as list-items.

This specifies a container height of 100% and an image height of 90%. images are inline elements by default, so I set them to white-space:nowrap and overflow:auto on the container.

The CSS:

.gallery { 
height: 100%; 
overflow: auto; 
white-space: 
nowrap; }

.gallery img{
margin: 20px 10px 0 0px;
height:90%
}

Upvotes: 1

user663031
user663031

Reputation:

  1. For a span to take a height, it has to be inline-block.

  2. For an element to serve as offset parent (against which percentage heights of children are computed), it has to have position set. This is quite basic CSS.

See jsfiddle.net/6xh6wbpL/2.

Upvotes: 0

Salman Arshad
Salman Arshad

Reputation: 272006

There are two issues:

  1. You forgot to add 100% height on the html and body elements
  2. You are using display: table and display: table-cell. The 100% height technique does not work on table displays. Change this to display: block and display: inline-block and you will get the expected results.

(Heavily) Modified Fiddle

Upvotes: 1

hamid
hamid

Reputation: 1838

You can achieve what you want by adding a width to each image. Of course the width doesn't have to be static. You can add a width of 100% and then set the height to auto so the images scale.

Upvotes: 0

bingo
bingo

Reputation: 2308

Is this what you're looking for? http://jsfiddle.net/jny0u3rc/8/

.gallery {
   height: 100%;
   overflow-x: scroll;
   white-space: nowrap;
   width: 100%;
}

.gallery-list {
   list-style: none;
   margin-top: 15px;
   margin-bottom: 0px;
   height: 100%;
}

.gallery-listitem {
   padding-top:0px;
   padding-right: 10px;
   height: 100%;
   display:inline-block
 }
.gallery-image {
   height:90%;
   width:auto;
}

Upvotes: 1

Related Questions