保持纵横比与最小/最大高度/宽度？-Maintainingaspectratiowithmin/maxheight/width?

23  

The property you're looking for is object-fit. This is one of Opera's innovations, you can read more about it in their 2011 dev article on object-fit (yep, it's been around that long). A few years ago, I wouldn't have been able to recommend it to you, but caniuse shows that everyone else is starting to catch up:

您正在寻找的属性是对象适合的。这是Opera的创新之一,您可以在2011年关于对象适配的开发文章中阅读更多关于它的内容(是的,它已经存在了很长时间)。几年前,我无法向你推荐它,但是caniuse表明其他人都开始追赶:

• Opera 10.6-12.1 (-o- prefix)

Opera 10.6-12.1(-o-前缀)

• Chrome 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;
}

Using a value of contain will force the image to maintain its aspect ratio no matter what.

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

Alternately, you might want to use this instead:

或者,您可能希望使用此代码:

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

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

3  

The only way that I know of to possibly accomplish this is by setting either the width or height to auto.

我知道可能实现此目的的唯一方法是将宽度或高度设置为自动。

#gallery{
    height: 500px;

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

1  

I don't know if this is possible using only CSS.

我不知道这是否只能使用CSS。

However, you may be able to accomplish the same thing with a few lines of Javascript:

但是,您可以使用几行Javascript完成相同的操作:

var img= document.querySelectorAll('img');
for(var i = 0 ; i 

var img= document.querySelectorAll('img');
for(var i = 0 ; i 

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