自動調整手機背景圖像

我無法找到問題的確切答案，所以在此先感謝。自動調整手機背景圖像

我需要製作一個非常非常流動的着陸頁，其中只包含一個圖像（320X480像素）和一個按鈕。我設法插入圖像和按鈕，但我無法找到正確的方式使其自動適合屏幕（iphone 5，iphone 4等）。

我不需要爲每個平臺呈現不同的圖像，只需在需要時自動調整它。

我想我應該使用CSS，但我是個初學者，所以溫柔與我:)

示例頁面：http://canbonim.co.il/test/test.html

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-8-i"> 
    <title>XXX</title> 
</head> 
<body> 
    <div style="position:relative; width:320px; height:480px; margin:auto; background:url(http://www.canbonim.co.il/test/test.jpg) top left no-repeat;"> 
     <div style="position:absolute; top:0px; right:0px; width:320px; height:480px;"> 
     <a class="link" title="" style="position:absolute;top:343px; left:38px; width:249px; height:48px;" href="tel:035142212"></a> <!-- --> 
     </div> 
    </div> 
</body> 
</html>

提前感謝！

來源

2014-01-26 OrenK

請問您可以嘗試下面的代碼。你會得到輸出，但這不是一個好的方法。使用響應式設計，如bootstrap n all。

<div style="position:relative; width: 100%; height:480px; margin:auto; background:url(http://www.canbonim.co.il/test/test.jpg) top left no-repeat;background-size: 100% 480px;"> 
     <div style="position:absolute; top:0px; right:0px; width: 100%; height:480px;"> 
     <a class="link" title="" style="position:absolute;top:343px; left:38px; width:249px; height:48px;" href="tel:035142212"></a> <!-- --> 
     </div> 
    </div>

來源

2014-05-24 07:35:16

自動調整手機背景圖像

回答

相關問題