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>