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>

如果你想要整个网站的smoth背景图片，你可以使用它：

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>

Answer 2

我刚刚在img css中删除了max-width to width。

body, html {
  margin:0;
  padding:0;
}

.wrapper {
  background:teal;
  height:100vh;
}

.frame img {
  width:100%;
  height:auto;
}

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

Answer 3

您错过了设置框架的大小！使用100％的整个容器的全高。

body, html {
  height: 100%;
  margin:0;
  padding:0;
}

.wrapper {
  background:teal;
  height:100%;
}

.frame{
  height: 100%;
  width: 100%;
}

.frame img {
  height:100vh;
  width: 100%;
}

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

Answer 4

全屏响应式图像背景

html, body{
  height: 100%;
}
body { 
			background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg) ;
			background-position: center center;
			background-repeat:  no-repeat;
			background-attachment: fixed;
			background-size:  cover;
			background-color: #999;
  
}

div, body{
  margin: 0;
  padding: 0;
  font-family: exo, sans-serif;
  
}
.wrapper {
  height: 100%; 
  width: 100%; 
}

.message {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%; 
  height:45%;
  bottom: 0; 
  display: block;
  position: absolute;
  background-color: rgba(0,0,0,0.6);
  color: #fff;
  padding: 0.5em;
}

<div class="wrapper">
  <div class="message">
    <h1>Responsive background</h1>
    <p>Fluid Layout</p>
  </div>
</div>

CSS - 100vh响应式图像

4 个答案: