如何獲取圖像以自動適應CSS3中的屏幕？

我想要得到一個垂直的圖像拉伸，自動適合任何屏幕的頂部和底部。我如何在CSS3中做到這一點？如何獲取圖像以自動適應CSS3中的屏幕？

這裏是我有什麼，它是否會在所有幫助：

.logo{ 
    height: 700px; 
    width: 150px; 
}

它不是一個背景圖像要麼。

來源

2013-12-18 user2840682

如果它不是一個背景圖像，並且不能成爲那麼你可能會運氣不好。 – DrCord

寬度100％或高度100％嗎？如果我理解你的問題。 – Wayne

@Wayne ...只要父容器有一個高度。或者你可以使用JavaScript來獲得'window.height'並設置圖像高度。 – brandonscript

.logo{ 
    height: 100vh; 
}

您可能還需要設置寬度爲auto保持比例...

（reference）

來源

2013-12-18 22:21:59

http://jsfiddle.net/6J8nS/ –

絕對是最正確的答案！ +1 –

視窗單元在IE8和更早版本中不起作用，所以此答案可能不是針對此問題的每個人的最佳選擇。 – acbabis

試試這個：

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     body, html { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     img { 
      height: 100%; 
      width: auto; 
     } 
    </style> 
</head> 
<body> 
    <img src="https://www.google.com/images/srpr/logo11w.png"/> 
</body> 
</html>

來源

2013-12-18 22:24:17 acbabis

最好的辦法是使它是div的背景，其高度和寬度設置爲100％，然後給它一個特殊的背景設置，這樣它就不會被扭曲。也許這是你需要的。

/* 
This is needed for 100% height of the div as the percentage refers to the parent element. 
*/ 
html, body { 
    height: 100%; 
} 

/* 
This is the actual image 
*/ 
.image { 
    background: #000 url(https://www.google.com/images/srpr/logo11w.png) repeat-x; 
    background-position: 50% 50%; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
} 

<body> 
    <div class="image"></div> 
</body>

來源

2013-12-18 22:24:34

如何獲取圖像以自動適應CSS3中的屏幕？

回答

相關問題