如何在 HTML 中调整大小答案

【问题标题】：How to resize in HTML如何在 HTML 中调整大小
【发布时间】：2014-07-05 05:32:59
【问题描述】：

我的网站（也就是我想为游戏制作的模组）有问题。当我粘贴图像时，我希望能够将其重新调整为整个屏幕示例的最大值：http://i61.tinypic.com/35hk7te.png 问题是我不想拥有那个空白所以这里是一个示例它应该是什么样子（不同图片）：http://ponyquest.org/motd/index.html山背景已满。

这是我添加图片的代码：

<img src="http://oi58.tinypic.com/2wmou89.jpg" style="max-width:100%; max-height:100%;" alt="">

【问题讨论】：

您不只是使用width 和height 属性吗？ jsfiddle.net/YvQ5c

标签： html image resize

【解决方案1】：

要解决此问题，请添加以下 CSS 规则：

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

默认情况下，页面有一个愚蠢的上边距，所以这会导致空白，这个 CSS 代码会重置它。

这是我所做的：

<html>
  <head>
 <title>NostalgiaRP LS</title>
 <style>
 html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}
 </style>
  </head>
  <body>

    <script type="text/javascript">
    <!--Put keywords in here to display when loading.-->
      keywords =
      [
       "Hacking Razley.",
       "Getting your credit card information.",
       "ED is coding your stuff!",  
       "Downloading a bunch of crap.",
       "Demoting admins.",
       "Fixing server bugs.",
       "Braking the game.",
       "Banning minges.",
       "Drawing ponies!:D.",
       "Checking your Steam ID.",
       "Removing System 32.",
       "Rehashing the MD5 algorithm.",
       "Bathing Father Grigori.",
       "Decrypting your steam account password.",
       "Re installing Garry's Mod.",
       "Killing Alyx.",
       "Reloading guns.",
       "Enter a useless message here!",
       "Asking for you to become an admin.",
       "Eating Watermelons.",
       "RDM.",
       "Fixing Source Engine.",
       "Drawing on walls.",
       "Taming Physics.",
       "Drinking Vodka...",
       "Sleeping.",
       "Fixing Gman's suit.",
       "Watching stuff and things...",
       "Reducing your lifespan.",
       "Joining the server.",
       "Delaying Episode 3.",
       "Uploading virus.",
       "......"
      ]


      var bCanChangeStatus = true;
      function ChangeText ( )  {
        if ( bCanChangeStatus )
        {
          var keyword = keywords[ Math.floor( Math.random() * keywords.length ) ]
          document.getElementById( "loadingtext" ).innerHTML = keyword;
        }

        setTimeout( "ChangeText()", 2500 );
      }

      ChangeText();

      var iFilesNeeded = 0;
      var iFilesTotal = 0;
      var bDownloadingFile = false;

      function SetFilesNeeded( iNeeded )
      {
        iFilesNeeded = iNeeded;
        RefreshFileBox();
      }

      function SetFilesTotal( iTotal )
      {
        iFilesTotal = iTotal;
        RefreshFileBox();
      }

      function DownloadingFile( filename )
      {
        if ( bDownloadingFile )
        {
          iFilesNeeded = iFilesNeeded - 1;
          RefreshFileBox();
        }

        document.getElementById( "loadingtext" ).innerHTML = "Downloading " + filename;
        bCanChangeStatus = false;
        setTimeout( "bCanChangeStatus = true;", 1000 );

        bDownloadingFile = true;

      }

      function SetStatusChanged( status )
      {
        if ( bDownloadingFile )
        {
          iFilesNeeded = iFilesNeeded - 1;
          bDownloadingFile = false;
          RefreshFileBox();
        }

        document.getElementById( "loadingtext" ).innerHTML = status;
        bCanChangeStatus = false;
        setTimeout( "bCanChangeStatus = true;", 1000 );
      }

      function RefreshFileBox()
      {
        document.getElementById( "files" ).innerHTML = "<img src='/images/loadingscreen/download.png' style='position: relative; top: 7px;'> " + iFilesNeeded + " downloads remaining";

        if ( iFilesTotal > 0 )
          document.getElementById( "files" ).style.visibility = 'visible';
        else
          document.getElementById( "files" ).style.visibility = 'hidden';
      }

      RefreshFileBox();

    </script>
        <iframe width="0%" height="0" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/16687438&amp;auto_play=true&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>

      <center>
      <div style="position: absolute;">
      <!-- Put the image URL here!!-->
    <img src="http://oi58.tinypic.com/2wmou89.jpg" style="height: 100%; max-width:100%; max-height:100%;" alt="">
    <div id="loadingtext" style="position:absolute; top:50%; left:50%; color: #666; font-family: Arial; font-size: 12px; margin-top:-6px; width:128px; margin-left:-64px; font-weight: bold;">Loading Text..</div>
</div>

        </div>
      </center>

      <div style='-webkit-box-reflect: below -120px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.1, transparent), to(rgba(255, 255, 255, 1.0))); position: absolute; top: 90%; right: 0; bottom: 0; left: 5%; height: 100px; overflow: show; font-family: Arial; font-size: 24px; font-weight: bold; color: #888' id='files'>
      </div>

    </div>

  </body>
</html>

我得到一个适合整个屏幕的图像。

【讨论】：

我在 CSS 方面很糟糕，我应该把它放在哪里？这是整个代码github.com/edgaraxe/NostalgiaRPRequest/blob/master/index.html
最简单的方法是在</head>之前添加这个：<style>YOUR CSS CODE HERE </style>
遗憾的是没有工作！还是一样！
我用你的整个代码编辑了我的答案。这对我来说可以。只是忘了为图片添加height: 100%。
总是乐于提供帮助:)

【解决方案2】：

我有点困惑。为什么不直接使用 background-image:url('img url');然后是背景尺寸：封面；在要添加背景图片的元素上？

【讨论】：