html - CSS - 100vh 响应式图像

Question

我正在尝试构建一个简单的全屏布局，调整图像大小，使其仅与屏幕一样大

body, html {
  margin:0;
  padding:0;
}

.wrapper {
  background:teal;
  height:100vh;
}

.frame img {
  max-width:100%;
  height:auto;
}

<div class="wrapper">
  <div class="frame">
     <img src="https://dummyimage.com/1500x2000/000000/fff">
  </div>
</div>

我希望图像适合屏幕，但是使用上面的示例却并不适合。我哪里出错了？

Answer 1

试试这个:

body, html {
  margin:0;
  padding:0;
}

.wrapper {
  height:100vh;
}

.frame img {
  height: 100%;
  /* max-width: 100% --- if you want it to be max. 100% width of the screen but this will stretch the image */
}

<div class="wrapper">
  <div class="frame">
     <img src="https://dummyimage.com/1500x2000/000000/fff">
  </div>
</div>

如果您想要整个网站有平滑的背景图像，您可以使用:

body, html {
  margin:0;
  padding:0;
}

.wrapper {
  height:100vh;
    background-image: url("https://dummyimage.com/1500x2000/000000/fff");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

<div class="wrapper">
</div>