个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 07:31:02 25 4
gpt4 key购买 nike

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

我创建了一个以大图像和大量 JQuery 动画为特色的网站，这是我网站的大部分内容。在 1080p 屏幕上观看时，它看起来符合我的预期，但当我在 friend 的较小分辨率屏幕上观看时，我意识到我需要让所有内容都按比例缩放。我将所有内容重新编码为百分比，并在我的图像上使用最大高度、最大宽度来使它们缩放，但我的标题和链接包含在一个 div 和 eve 中，尽管我已经在图像上尝试了最大宽度、最大高度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>

最佳答案

添加最大和最小宽度并不能解决您的问题，因为无法保证这些百分比在所有设备尺寸中的作用都相同。要么你应该看看css media queries或更可靠和专业的解决方法是使用像 Bootstrap 这样的框架

关于jquery - 随着浏览器大小的变化缩放 div 内的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31509069/

25 4 0
文章推荐： css - flex 容器中的 ui.bootstrap 下拉指令
文章推荐： c++ - 文件映射打开 (Windows)
文章推荐： c++ - 关于类名的arduino c++问题
文章推荐： javascript - 动画后图像抗锯齿
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com