Question

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

我需要创建一个非常非常移动的着陆页，其中只包含一张图像（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>

提前致谢！

Answer 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>

自动调整大小移动背景图像

1 个答案: