关于css 设置img宽高自适应问题

问题如下：

有个img轮播效果，外层div相框500*500，里面会有多个img，每次只展示一个img，宽高哪个大采用哪个，另一个auto。

例：一个img为宽800高300，则显示为宽100%，高自适应，如图：
![图片描述][1]

例：一个img为宽200高700，则显示为高100%，宽自适应，如图：

![图片描述][2]

求大神纯css如何实现，css3也行，如果必须用js，就不必回答了，谢谢

---

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

http://jsfiddle.net/grv5n8ns/