13

I need to use css style like max-width:90% and max-height:90% to define image size not overflow the windows. However, this work well on Safari but not work on Chrome. Here is the demo I write on jsfiddle: http://jsfiddle.net/hello2pig/rdxuk7kj/

<style>
div{
    padding: 0;
    margin: 0;
}
.slide{
    text-align:center; 
    background-size: 100% 100%;
}
.user-img{
    max-height: 80%;
    max-width: 90%;
}
</style>

<body>
   <div class="slide">
      <div id="container0" class="container slideDown front">
         <div class="image-container">
         <img src="http://people.cs.clemson.edu/~bli2/hiOne/image/userImage/1.jpg" class="user-img" ></img>         
         </div>                 
      </div>
   </div>
</body>

If you open this demo in safari, whole image can be displayed, but image overflow the window on Chrome. Any method to fix the problem? Thanks for your help!

G.EGCB
  • 94
  • 10
Rambo Li
  • 307
  • 1
  • 3
  • 16
  • 1
    Of which ancestors height is the `max-height` to be a percentage? [See this example](http://jsfiddle.net/rdxuk7kj/1/). – showdev Jan 16 '15 at 21:22
  • Big Thanks for your answer. It's what I'm looking for. Are there any easier way instead of set all divs height:100%? The image always embedded in many divs. – Rambo Li Jan 16 '15 at 22:10
  • I suppose you could create a class like `.fullheight{height:100%;}` and apply that to all the elements. But, I liked Joseph Hansen's idea, below. Does that work for you? – showdev Jan 16 '15 at 22:14
  • @RamboLi, glad you got some help from the answers posted. Additionally, I would suggest that you select one answer marking it as accepted using the check mark and upvote all the answers that helped you. Hope you enjoyed using StackOverflow. – Joseph Hansen Jan 18 '15 at 03:37

2 Answers2

15

Some times using percentages for fluidity in layouts is tricky because you have to deal with containers and border-type things.

You might prefer to use viewport units. You can learn about them on css-tricks and caniuse will show you how well it's supported.

Essentially you can say:

<div style="height: 55vh;">Hi</div>

meaning a div element of 55vh height where 1vh is defined as the value of 1% of the viewport's height. Something that is 100vh will be 100% of the viewport's height.

Joseph Hansen
  • 12,665
  • 8
  • 50
  • 68
5

You need to give an explicit value for the container. This would work:

.image-container {
    width: 500px;
    height: 300px;
}

In your case, the % is taken from the <html> element in the fiddle.

From MDN:

percentage

The percentage is calculated with respect to the height of the containing block. If the height of the containing block is not specified explicitly, the percentage value is treated as none.

Community
  • 1
  • 1
Mosho
  • 7,099
  • 3
  • 34
  • 51