使图像始终在固定容器内完全且响应式地显示？

Question

我有以下html：

<div class="me">
    <img src="IndianRemovalAct-final.jpg">
</div>

以及以下款式：

.me {
  position: fixed;
  height: 100%;
  width: 100%;
}

/* method 1*/
img {
  width: 100%;
  height: auto;
}

/* method 2*/
img {
  width: auto;
  height: 100%;
}

我尝试了以上两种方法来使图像响应。但是，如果我使浏览器变窄或变短，则部分图像将位于视口之外。我想在其固定位置的容器内完整且响应式地显示图像。图片很大，我只是在实现。

Answer 1

我走了一条不同的路线，因为我假设你想保持图像的长宽比：

.me {
      position: fixed;
      height: 100%;
      width: 100%;
      background: url('http://placehold.it/350x150') no-repeat center center fixed; 
      background-size: cover;
    }

<div class="me"></div>

示例：http://jsbin.com/woqijaxoqu/edit?html,output

Answer 2

我建议的就是你想要的吗？

<div class="me">
    <img src="https://unsplash.it/900/900">
</div>

.me {
  position: fixed;
  height: 100%;
  width: 100%;

}

img {
  max-width: 100%;
}

Answer 3

这是似乎有效的解决方案。基于对我的帖子的回复的输入。

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

这个解决方案是基于人们建议的“max-”。

谢谢大家！