Geek Answers Handbook

Save popup image in window and keep aspect ratio

BASIC EDITING: Well, I just understand that there are a hundred different cases where you want to do what I want, but using different rules, so I will have to describe my specific case. I mainly use this popup image ( here)

If you squeeze the size of the window when the popup is turned on, you will notice that the popup does not compress to fit the window, which gives a bad user interface, especially in landscape mode on your smartphone.

I want my popup to shrink to fit two screen sizes, without changing the aspect ratio. (keeping it squared)

So far I have made the following changes:

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

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

, firebug, , ... , ?

----------- ( ): ----------------

( , ) 500x500, , . html:

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

css:

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

css , , 500 . , 100%:

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

, , 500 ! css , , ?

+4
1

vmin:

1/100th . (: MDN)

DEMO

CSS:

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

, IE8- (. canIuse )

IE9 vm vmin example:

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

, , div CSS . div , , SO .

CSS, , .

------ ------------------

500x500px, / 500 .

100% / / auto, 100% 500 /:

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;
}
+4

More articles:


All Articles