max-width、max-height问题

 给一个img标签如下样式：

img{

　　max-width:30vw;

　　max-height:62vh;

}

假设已知图片为250*480规格，

图片宽度在 0-30vw之间变化；图片高度在0-62vh之间变化

当屏幕宽度改变时，图片宽度也发生改变，但图片宽度不超过最大宽度，且图片高度等比缩放；

当屏幕高度改变时，图片高度也发生改变，但图片高度不超过最大高度，且图片宽度等比缩放；

 

 

即使没有显式说明图片的width、height，也遵从以下规则

MDN说法：

max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。

max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.

max-height 重载（覆盖掉） height, 但是 min-height 又会重载（覆盖掉） max-height.

实际效果：

 　　当 height 和 max-height一起使用时，谁小听谁的

      　　max-height  <   height     元素高度：   max-height

　   　　height  <  max-height      元素高度：    height

　　当 height,max-height,min-height一起使用时

　　height  > max-height > min-height          元素高度：max-height

　　height  >  min-height > manx-height       元素高度：min-height

　　min-height > height > max-height           元素高度：min-height