保持最小/最大高度/宽度的纵横比？答案

【问题标题】：Maintaining aspect ratio with min/max height/width?保持最小/最大高度/宽度的纵横比？
【发布时间】：2015-01-21 13:42:20
【问题描述】：

我的网站上有一个画廊，用户可以上传图片。

我希望图像位于保持其高度的 div 中，图像的高度不应超过 500 像素。宽度应该是自动的以保持纵横比。

HTML：

<div id="gallery">
    <img src="uploads/my-dynamic-img.jpg">
</div>

我试过这个 CSS：

#gallery{
    height: 500px;

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

上面的效果很好，画廊总是 500 像素高，图片高度永远不会超过 500 像素。我遇到了较小图像的问题，如果用户上传了一个非常小的图像，我希望它“放大”到至少 200 像素。我知道这可以通过在图像上设置min-height 来实现，问题是，如果图像的高度小于 200 像素，但是说宽 2000 像素，图像会被放大到 200 像素的高度，但是宽高比被搞砸了，因为图像比图像父 div 宽。

我怎样才能有最小高度但保持纵横比？

【问题讨论】：

这不是 CSS 语法——您使用的是 SASS 或 Stylus 之类的语言还是只是一个错误？
我首先想到的是使用带有 background-size: 包含的背景图片，但是如果你需要覆盖
如果您可以控制 html 输出，请使用服务器端处理来确定纵横比，然后添加“宽”或“高”类并分别处理它们的样式。如果您无法控制 html，则可以使用 javascript 来做同样的事情，然后再分别设置它们的样式。

标签： html css sass aspect-ratio

【解决方案1】：

我不知道这是否可以仅使用 CSS。

但是，您也许可以用几行 JavaScript 完成同样的事情：

var img= document.querySelectorAll('img');
for(var i = 0 ; i < img.length ; i++) {
  img[i].onload= function() {
    var h= this.naturalHeight;
    h= Math.min(500,Math.max(200,h));
    this.style.height= h+'px';
  }
}

这会将所有图像的高度设置为 200 像素到 500 像素之间。宽度会自动缩放。

var img= document.querySelectorAll('img');
for(var i = 0 ; i < img.length ; i++) {
  img[i].onload= function() {
    var h= this.naturalHeight;
    h= Math.min(500,Math.max(200,h));
  }
}

#gallery{
  height: 500px;
  width: 400px;
  overflow: hidden;
}

<div id="gallery">
  <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo-med.png">

</div>

【讨论】：

我在原始帖子中省略了this.naturalHeight，因此图像高度总是要么 200px 或 500px。现在它可以取两者之间的值。

【解决方案2】：

据我所知，实现此目的的唯一方法是将width 或height 设置为auto。

#gallery{
    height: 500px;

    img{
        max-height: 500px;
        width: auto;
    }
}

【讨论】：

【解决方案3】：

您要查找的属性是object-fit。这是 Opera 的创新之一，您可以在他们的2011 dev article on object-fit 中了解更多信息（是的，它已经存在了那么久）。几年前，我无法向你推荐它，但 caniuse 表明其他人都开始赶上：

Opera 10.6-12.1（-o- 前缀）
铬 31+
Opera 19+
Safari 7.1+
iOS 8+
Android 4.4+

http://caniuse.com/#search=object-fit

#gallery img {
    -o-object-fit: contain;
    object-fit: contain;
}

使用contain 值将强制图像保持其纵横比无论如何。

或者，您可能想改用这个：

#gallery img {
    -o-object-fit: cover;
    object-fit: cover;
    overflow: hidden;
}

http://sassmeister.com/gist/9b130efdae95bfa4338e

【讨论】：

截至 Microsoft Edge，这仍未实现。但是，他们表示 Edge 正在考虑中。 https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/
这个 sullotion 的一个问题是它只强制实际图像而不是 img-tag 包含比例，因此，例如，如果您在图像标签上添加边框，它将不会保持比例：jsfiddle.net/pwxca5af
谢谢！如果您想定义地点将是图像，但由于网络延迟您还没有加载它，它可以完美地工作。我将它与 4x20 图像元素的大网格上的延迟加载相结合。
@brsfan 今天似乎 Edge 已经实现了对象匹配。它有效！

【解决方案4】：

实际上，我一直想做类似的事情。如果你喜欢的话，这里有 jQuery 中的一些东西。

SCSS：

#gallery {
  height: 500px;

  img {
    max-height: 100%;
  }

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

  .regular {
    width: auto;
    min-height: 200px;
  }
}

jQuery:

$( 'img' ).each( function() {

  var imageWidth = parseFloat( $( this ).css( 'width' ) );
  var imageHeight = parseFloat( $( this ).css( 'height' ) );

  if( imageHeight <= 200 && imageWidth >= 200 ) {
    $( this ).addClass( 'small' );
  }
  else {
    $( this ).addClass( 'regular' );
  }
});

CodePen

【讨论】：