html 最小高度,关于html：用最小/最大高度/宽度保持长宽比？

我的网站上有一个图库，用户可以在其中上传图像。

我希望图像位于保持其高度的div中，图像的高度不应大于500px。 宽度应自动保持纵横比。

HTML：

我试过这个CSS：

#gallery{

height: 500px;

img{

max-height: 500px;

max-width: 100%;

}

}

上面的方法效果很好，图库的高度始终为500px，图片的高度永远不会超过500px。 尽管使用较小的图像会遇到问题，但是如果用户上传的图像非常小，我希望图像"爆炸"到最小200px。 我知道这可以通过在图像上设置min-height来实现，这是一个问题，如果图像的高度小于200px但宽度为2000px，则图像的高度会膨胀到200px，但是 宽高比是固定的，因为图像比图像父div宽。

如何保持最小身高，但保持长宽比？

那不是CSS语法-您使用的是SASS还是Stylus之类的语言，还是只是错误？

它的SASS语法。

我想到的第一件事是使用background-size：contain的背景图像，但是如果您需要覆盖<= IE8，那将无法工作。

如果您可以控制html输出，请使用服务器端处理来确定纵横比，然后添加"宽"或"高"类并分别处理其样式。 如果您没有对html的控制，则可以使用javascript来做同样的事情，然后再次对它们进行单独样式设置。

您要查找的属性是object-fit。这是Opera的一项创新，您可以在其2011年关于对象适配的开发文章中了解更多(是的，已经存在了很长时间)。几年前，我无法向您推荐它，但是caniuse显示其他所有人都开始追赶它：

Opera 10.6-12.1(-o-前缀)

铬31+

歌剧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/zh-cn/microsoft-edge/platform/status/objectfitandobjectposition/

这种污的一个问题是，它仅强制实际图像而不是img标签包含比例，因此，例如，如果在image标签上放置边框，它将不会保留比例：jsfiddle.net/pwxca5af

谢谢！ 如果您要定义将是图像的地点，但由于网络延迟而尚未加载它，则此方法非常适用。 我将其与4x20图像元素的大网格上的延迟负载结合在一起。

@brsfan看来今天Edge已实现对象适配。 有用！

我知道要完成此操作的唯一方法是将width或height设置为auto。

#gallery{

height: 500px;

img{

max-height: 500px;

width: auto;

}

}

实际上，我一直打算做类似的事情。如果您对此感兴趣，可以在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' );

}

});

密码笔

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

但是，您可以使用几行JavaScript来完成相同的操作：

var img= document.querySelectorAll('img');

for(var i = 0 ; i

img[i].οnlοad= 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[i].οnlοad= function() {

var h= this.naturalHeight;

h= Math.min(500,Math.max(200,h));

}

}

#gallery{

height: 500px;

width: 400px;

overflow: hidden;

}

我从原始帖子中删除了this.naturalHeight，因此图像高度始终为200px或500px。 现在它可以在两者之间取值。