Question

stackoverflow上的第一篇文章。我发现这个网站在过去5年里在高中学习数字技术时非常有用。这次我在这里发现的一切都不会起作用，我怀疑它非常明显，只是想找人指出我的新手错误。

我创建了一个网站，其中包含大量图片和大量JQuery动画，这是我网站的大部分内容。在1080p屏幕上观看它看起来像我的意图，但当我在朋友较小分辨率的屏幕上观看它时，我意识到我需要让所有东西都缩放。我将所有内容重新编码为百分比，并在我的图像上使用Max-height，max-width进行缩放，但我的标题和链接包含在div和eve中，尽管我已尝试使用set设置的max-width，max-height在div上的宽度高度它似乎仍然没有效果。

TL; DR：我希望我的标题和链接随着浏览器窗口的大小调整而缩放，因为我已经使用过Pukeko和Hills。我的代码中的任何其他问题也将非常感激。

网站：http://pirithepukeko.tumblr.com/

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

    html {
    overflow: hidden;
    }

    iframe#tumblr_controls {

    top: 0% !important;

    right:0% !important; 

    display:none !important;

    }

    </style>
    <script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    $(window).load(function() {
    $("#Hill").animate( {top: '-=100%'}, 3000);

    $("#Pukeko").delay(1000).animate( {left: '-=100%'}, 2000);

    $("#P").delay(2000).fadeIn(3000);
    $("#I").delay(2000).fadeIn(3000);
    $("#R").delay(2000).fadeIn(3000);
    $("#I2").delay(2000).fadeIn(3000);

    $("#T").delay(2000).fadeIn(3000);
    $("#H").delay(2000).fadeIn(3000);
    $("#E").delay(2000).fadeIn(3000);

    $("#P2").delay(2000).fadeIn(3000);
    $("#U").delay(2000).fadeIn(3000);
    $("#K").delay(2000).fadeIn(3000);
    $("#E2").delay(2000).fadeIn(3000);
    $("#K2").delay(2000).fadeIn(3000);
    $("#0").delay(2000).fadeIn(3000);
    $("#BuyButton").delay(4000).fadeIn(4000);
    $("#ExampleButton").delay(4000).fadeIn(4000);

    });
    </script>
    <title></title>
</head>
<body>
    <img id="bg" src="http://i.imgur.com/wpAxcsD.png" style=
    "position:fixed; top: 0; left: 0; min-width:100%; min-height: 100%;">
    <div id="header" style=
    "position:absolute; z-index: 2; Left:12%; Top:20%; max-width:50%; max-Height:20%;">
    <img id="P" src="http://i.imgur.com/VAjsWaY.png" style=
    "z-index: 2; display:none; max-width: 100%; max-height: 100%;">
        <img id="I" src="http://i.imgur.com/tx3QKsv.png" style=
        "z-index: 2; display:none; max-width: 100%; max-height: 100%;">
        <img id="R" src="http://i.imgur.com/2z85VMR.png" style=
        "z-index: 2; display:none; max-width: 100%; max-height: 100%;">
        <img id="I2" src="http://i.imgur.com/tx3QKsv.png" style=
        "z-index: 2; display:none; max-width: 100%; max-height: 100%;">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <img id="T" src=
        "http://i.imgur.com/MQOOrTY.png" style=
        "z-index: 2; display:none; max-width: 100%; max-height: 100%;">
        <img id="H" src="http://i.imgur.com/A7RunYJ.png" style=
        "z-index: 2; display:none; max-width: 100%; max-height: 100%;">
        <img id="E" src="http://i.imgur.com/2M9Fyg9.png" style=
        "z-index: 2; display:none; max-width: 100%; max-height: 100%;">
        <p>
            <img id="P2" src="http://i.imgur.com/VAjsWaY.png" style=
            "z-index: 2; display:none;max-width: 100%; max-height: 100%;">
            <img id="U" src="http://i.imgur.com/7ukLJsL.png" style=
            "z-index: 2; display:none; max-width: 100%; max-height: 100%;">
            <img id="K" src="http://i.imgur.com/agxDLLs.png" style=
            "z-index: 2; display:none; max-width: 100%; max-height: 100%;">
            <img id="E2" src="http://i.imgur.com/2M9Fyg9.png" style=
            "z-index: 2; display:none; max-width: 100%; max-height: 100%;">
            <img id="K2" src="http://i.imgur.com/agxDLLs.png" style=
            "z-index: 2; display:none; max-width: 100%; max-height: 100%;"><img>
            <img id="0" src="http://i.imgur.com/WRT7FYQ.png" style=
            "z-index: 2; display:none; max-width: 100%; max-height: 100%;">
        </p>
        <p></p>
        <p></p>
        <p>
            <a href="http://www.pirithepukeko.tumblr.com/Buy"><img id=
            "BuyButton" src="http://i.imgur.com/Q4eqkdm.png" style=
            "display:none; z-index: 2; max-width: 100%; max-height: 100%; min-width: 5%; min-height: 5%;"></a>
        </p>
        <p></p>
        <p>
            <a href="http://www.pirithepukeko.tumblr.com/example"><img id=
            "ExampleButton" src="http://i.imgur.com/CpinwiT.png" style=
            "display:none; z-index: 2; max-width: 100%; max-height: 100%; min-width: 5%; min-height: 5%;"></a>
        </p><br>
    </div>
    <div id="stuff" style=" z-index: 1; Left:0%; Top:0%;">
        <img id="Hill" src="http://i.imgur.com/r3gkAkv.png" style=
        "position:fixed; Left:0%; TOP:100%; z-index: 1; max-width: 100%; max-height: 110%; min-width: 50%; min-height: 50%;">
        <img id="Pukeko" src="http://i.imgur.com/cO8u6M6.png" style=
        "position:fixed; TOP:0%; LEFT:100%; max-width:100%; max-height:110%; z-index: 1;">
    </div>
</body>

Answer 1

添加最大和最小宽度不会解决您的问题，因为无法保证这些百分比在所有设备尺寸中都会起作用。您应该调查css media queries或更可靠和专业的解决方法是使用Bootstrap等框架

随着浏览器大小的变化，缩放div内的图像

1 个答案: