1

I have a responsive website. My images exist in a div window I called "preview" and they are not supposed to exceed the height of the window. It seems to be working for certain images, and I can't figure out why it won't work for all of them.

Probably not necessary, but this is my code for the div.

.preview {
    max-height: 100%;
    max-width: 100%;
}

Here's an example of an image that's working.

<img class="preview" src="assets/works/design/posters/spring2016.jpg">

This one isn't working. It is taller than the div height.

<img class="preview" src="assets/works/reindeer.jpg">

Here's my site: alexjberger.com

Does anyone have any insight? I appreciate it.

Alex Berger
  • 13
  • 2
  • Went to your site and could not figure out what you were trying to say, but then I finally got it. The div itself never goes greater than 100%. It's the images that do. I'd recommend adding this to your css: `.preview img { max-height: 100%; max-width: 100%}` – Chris Stanley Apr 22 '16 at 19:17
  • Looks like you got an answer, just wanted to say you're sketchbook stuff is great, really unique. – knocked loose Apr 22 '16 at 19:17
  • Possible duplicate of [CSS max-height not working](http://stackoverflow.com/questions/520710/css-max-height-not-working) or [max-height: x% doesn't work](http://stackoverflow.com/questions/27992881/max-height-x-doesnt-work-on-chrome) – Ani Menon Apr 22 '16 at 19:18

1 Answers1

2

You need to give the images parent p a height as well to make it work.

For an element to respect a height given in percent, its parent also must have a height, and if that as well is given in percent, the next parent etc. One often ends up with this rule html, body { margin: 0; height: 100%; }

Asons
  • 84,923
  • 12
  • 110
  • 165