保持最小/最大高度/宽度的纵横比?

Posted

技术标签:

【中文标题】保持最小/最大高度/宽度的纵横比?【英文标题】: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 来做同样的事情,然后再分别设置它们的样式。 【参考方案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】:

据我所知,实现此目的的唯一方法是将widthheight 设置为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

【讨论】:

以上是关于保持最小/最大高度/宽度的纵横比?的主要内容,如果未能解决你的问题,请参考以下文章

根据宽度和高度保持纵横比

根据高度保持div的纵横比[重复]

如何在FFMpeg中连接两个或多个具有相同宽度和不同高度的视频并保持相同的纵横比?

预览窗格中照片的纵横比,其中高度恒定且仅宽度变化

是否可以在运行时使用 AutoLayout 根据屏幕高度或屏幕宽度中的最大值来制作 1:1 的纵横比?

保持高度固定的图像纵横比