将弹出图像保留在窗口内并保持纵横比答案

【问题标题】：Keep popup image within window and keep aspect ratio将弹出图像保留在窗口内并保持纵横比
【发布时间】：2026-02-13 11:30:01
【问题描述】：

主要编辑： 好吧，我只是意识到有一百种不同的情况，你想做我想做的事，但使用不同的规则，所以我必须描述我的具体情况。基本上我使用的是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;
}

如果您尝试使用萤火虫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，图像会留在窗口内，但当窗口的其中一个尺寸小于 500 像素时，图像就会变形。要固定比率，我可以摆脱两个100% 规则之一：

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

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

【问题讨论】：

原始形状总是期望为正方形，所以是的。你在想什么？

标签： image css responsive-design aspect-ratio

【解决方案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 的纵横比。您可以使用 SO 上的许多帖子中描述的填充技术，如this one，根据宽度保持 div 的纵横比。

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

------上一个答案------

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

您可以将该属性用于 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;
}

【讨论】：

好吧，我的图像不一定是 500x500，但总是一个正方形，所以我可以在 html 中指定宽度和高度为 500，它似乎可以工作。但是如果它是另一种元素类型，比如 div，该怎么办？如何将其定义为 500x500？
@BraveKenny 对于其他元素，如div，你可以看看这个*.com/questions/1495407/…，当你需要根据高度保持纵横比时会变得很复杂。
好吧，我迷路了......我完全重新做了这个问题，以更准确地适应我想要实现的目标......我试图简化，但我想我失去了我的背景途中遇到问题。
@BraveKenny 我更新了我的答案以提供其他解决方案。