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> 

Answer 2

我刚刚在img css上删除了max-width到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>