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%;
    }

此解决方案基于人们建议＆＃34; max - ＆＃34;。

谢谢，SO伙计们！

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

3 个答案: