自动调整手机背景图片大小答案

【问题标题】：auto resize mobile background image自动调整手机背景图片大小
【发布时间】：2014-02-17 11:59:58
【问题描述】：

我找不到我的问题的确切答案，所以提前致谢。

我需要制作一个非常非常移动的登录页面，其中仅包含一张图片（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>

提前致谢！

【问题讨论】：

标签： image mobile autoresize

【解决方案1】：

你能试试下面的代码吗？您将获得输出，但这不是一个好方法。使用响应式设计，例如 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>

【讨论】：