Question

MAJOR EDIT：好的我只是意识到有一百种不同的情况，你想要做我想要的但是使用不同的规则，所以我将不得不描述我的具体情况。基本上我使用this image popup（code here）

如果在弹出窗口打开时缩小窗口大小，您会注意到弹出窗口没有缩小以适应窗口，这会给智能手机上的横向模式带来糟糕的用户体验

我希望我的弹出窗口根据屏幕的两个尺寸缩小，而不改变图像的宽高比。（保持平方）

到目前为止，我已做出这些改变：

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

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

如果你使用firebug尝试there，它会在缩小宽度时使图像响应，但在缩小窗口高度时则不会...如何使两个尺寸都响应，同时保持良好的宽高比图像？

-----------上一个问题（仅供历史用途）：----------------

我想在我的浏览器窗口中严格保留一个最大尺寸为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，图像停留在窗口内，但是当窗口的一个维度小于500px时，图像会变形。为了解决这个问题，我可以摆脱两个100%规则之一：

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

但是，确实保持了这个比例，但是当窗口宽度小于500px时，图像会被裁剪掉！对于这个看似基本的问题，什么是纯粹而简单的CSS解决方案？

Answer 1

这是 vmin单位的一个很好的用例：

高度和宽度之间的最小值的1/100 视。（source : MDN）

<强> DEMO

相关CSS：

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

使用这些设备的缺点是浏览器支持，IE8不支持它们（see canIuse了解更多信息）

对于IE9支持，您需要指定vm而不是vmin示例：

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

如果你不能使用这些单位，我根本不知道用CSS保持div的宽高比。您可以使用许多帖子中所描述的填充技术，根据宽度来维护div的宽高比，如this one。

对于图像，您可以使用我在上一个答案中描述的CSS规则，但您无法将图像的大小限制为任意数量的像素。

------以前的答案------------------

如果图像的自然尺寸为500x500px，则无需指定500px的最大宽度/高度。

您可以将该属性用于100％最大宽度/高度，并为auto属性提供宽度/高度以保持图像的宽高比，并且永远不会超过100％或500px宽度/高度：

<强> 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;
}

在窗口中保持弹出图像并保持纵横比

1 个答案: