響應式圖像和文字轉換

如何製作適合iPhone和桌面上100％寬度和100％高度的響應式圖像。我的意思是這樣的 - http://themeforest.unitedthemes.com/wpversions/brooklyn/elegant/ 這是確定的，如果它犧牲一點點的圖像從任何一方，但它應該保持縱橫比，它應該適應整個屏幕我試圖做到這一點，但無濟於事響應式圖像和文字轉換

我注意到頂部圖像上的過渡和文字。我們如何做到這一點。

這裏是我到目前爲止的代碼

HTML

<div id="body"> 
    <div> 
     <img src="1.jpg" class="image" /> 
    </div> 
</div>

CSS

.image { 
    position: absolute; 
    top: 0; 
    left: 0; 
    max - width: 100 % ; 
    max - height: 100 % ; 
    width: auto; 
}

但這裏的事情是，像心不是適合屏幕的高度和寬度。我如何達到上述100％的寬度和高度，就像我給出的鏈接一樣。

歡迎SO，不幸的是，要求代碼的問題必須表現出對問題的理解最小正在解決。包括嘗試解決方案，爲什麼他們沒有工作，以及預期的結果。另請參閱：堆棧溢出問題清單。 –

好吧..等等。讓我提供我的代碼 – user3219918

那裏，現在我已經提供了我的代碼，我在這裏是新的，所以我什麼都不知道。謝謝你 – user3219918

而是使用圖片來實現這種使用背景圖片，並設置以下的css：

#body{ 
    background-image:url(yourimgurl); 
    background-position:50% 50%; 
    background-size:cover; 
}

它會導致你的圖像跨越整個容器和修剪有點過邊時，它的體積更小。

2014-02-11 13:30:24

我試過了，背景圖片沒有出現。我只是HTML和CSS的初學者，這是我第一個真正的網站。這裏是我現在的代碼 HTML

CSS #body { bacgkround圖像：網址（ 'image.jpg文件'）; background-position：50％50％; background-size：cover; } – user3219918

@ user3219918你需要設置一個寬度和高度爲#body以及 –

它仍然無法正常工作。 #body { bacgkround-image：url（'Image。JPG'）; background-position：50％50％; background-size：cover; height：700px; width：1000px; } – user3219918

你需要這樣做：

2014-02-11 14:30:00 polikin

回答