Keep popup image within window and keep aspect ratio

Question

MAJOR EDIT: Okay I just realize there are a hundred different cases where you'd want to do what I want but using different rules, so I will have to describe my specific case. Basically I am using this image popup (code here)

If you squeeze down the size of the window when a popup is on, you will notice the popup does not shrink to fit the window, which gives a poor user experience notably on landscape mode on your smartphone

I want my popup to shrink according to the two dimensions of the screen, without changing the aspect ratio of the image. (keeping it squared)

So far I have made these changes:

.focus {
  z-index: 10;
  max-width: 500px;
  max-height: 500px;
  display: none;
}

.focus.enabled .container {
  max-width: 500px;
  max-height: 500px;
}

If you try there using firebug, it makes the image responsive when shrinking width, but not when shrinking height of the window... how do I make both dimensions responsive, while keeping a good aspect ratio for the image?

----------- Previous question (for historic purpose only): ----------------

I want to keep an element (in that case, a picture) with a max-size of 500x500 strictly within my browser window, all that while keeping its aspect ratio. Here's some html:

<html>
  <head>
  </head>
  <body>
    <img src="myimage.png" class="image" />
  </body>
</html>

And some css:

.image { 
  max-height: 500px;
  max-width: 500px;
  height: 100%;
  width: 100%;
}

Now with this css, the image stays within the window, but gets distorted when one of the dimensions of the window gets smaller than 500px. To fix the ratio, I can get rid of one of the two 100% rules:

.image { 
  max-height: 500px;
  max-width: 500px;
  height: 100%;
  /*width: 100%;*/
}

But then, the ratio is kept indeed, but the image gets cropped when window width gets smaller than 500px! What is a pure and simple css solution to this seemingly basic issue?

The original shape is always expected to be a square, so yes. What are you thinking? — SylvainB, Jul 28 '14 at 09:57

score 4 · Accepted Answer · edited May 23 '17 at 12:00

This is a good use case for vmin units :

1/100th of the minimum value between the height and the width of the viewport. (source : MDN)

DEMO

Relevant CSS :

img {
    width: 70vmin; 
    height: 70vmin;
    max-width: 500px; 
    max-height: 500px;
}

The drawback for using these units is browsers support, they are not supported by IE8- (see canIuse for more info)

For IE9 support you need to specify vm instead of vmin example :

width:70vm; 
width: 70vmin; 
height:70vm;
height: 70vmin;

If you can't use these units, there is no way I am aware of to maintain the aspect ratio of a div with CSS according to height. You can maintaint the aspect ratio of a div according to width using the padding technique described in many post on SO like this one.

For the image, you can use the CSS rules I described in my previous answer but you won't be able to limit the size of the image to an arbitrary amount of pixels.

------PREVIOUS ANSWER------------------

If the natural size of the image is 500x500px, you don't need to specify the 500px max-width/height.

You can use that property for the 100% max-width/height and give width/height the auto attribute to keep the aspect ratio of image and never exceed 100% or 500px width/height :

DEMO

HTML :

<img src="http://lorempixel.com/output/nature-q-c-500-500-5.jpg" alt="" />

CSS :

img {
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
}

Okay, my image is not necessarily 500x500 but always a square, so I can specify width and height of 500 in html and it seems to work. But What if it is another element type, like a div? How can I define it as 500x500? — SylvainB, Jul 28 '14 at 10:16
@BraveKenny for other elements like `div`, you can have a look at this http://stackoverflow.com/questions/1495407/css-a-way-to-maintain-aspect-ratio-when-resizing-a-div it becomes complicated when you need to keep aspect ratio according to height. — web-tiki, Jul 28 '14 at 10:27
Okay I'm lost... I re-did the question entirely to fit more accurately what I'm trying to achieve... I tried to simplify but I think I lost the context of my problem on the way. — SylvainB, Jul 28 '14 at 12:58
@BraveKenny I updated my answer to provide an other solution. — web-tiki, Jul 29 '14 at 09:03

Keep popup image within window and keep aspect ratio

1 Answers1