保持弹出图片在窗口内并保持宽高比

Question

保持弹出图片在窗口内并保持宽高比

imagecssresponsive-designaspect-ratio

4

主要编辑：好的，我刚意识到有很多不同的情况需要使用不同的规则来实现我想要的效果，因此我将描述我的特定情况。基本上，我正在使用这个图像弹出窗口（代码在这里）

如果您将窗口大小缩小到弹出窗口打开时，您会注意到弹出窗口不会缩小以适应窗口大小，在智能手机的横屏模式下尤其给用户带来了不好的体验。

我希望我的弹出窗口能够根据屏幕的两个维度进行缩小，而不改变图像的宽高比（保持正方形）。

到目前为止，我已经做出了以下更改：

.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解决方案来解决这个看似基本的问题？

- SylvainB

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

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- web-tiki · Accepted Answer

这是一个很好的使用情况vmin单位：

视口高度和宽度之间最小值的1/100。 (来源：MDN)

演示

相关CSS：

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

使用这些单位的缺点是浏览器支持，它们不受IE8-支持（有关更多信息，请参见canIuse）

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

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

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

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

------先前的答案------------------

如果图片的自然大小为500x500px，则不需要指定500px的最大宽度/高度。

您可以使用该属性的100%最大宽度/高度，并给予width/height 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;
}