HTML로 크기를 조정하는 방법

-1

일명 내 웹 사이트에 문제가 있습니다. 게임용으로 만들고 싶습니다. 심지어 내가 이미지를 붙여 넣을 때 전체 화면의 최대 크기로 다시 크기를 조정할 수 있기를 원합니다. http://i61.tinypic.com/35hk7te.png 문제는 여기에 흰색 공백을 넣고 싶지 않아서 어떻게 보이는지 (예 : 다른 이미지) : http://ponyquest.org/motd/index.html 산의 배경이 가득 찼습니다.HTML로 크기를 조정하는 방법

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

출처

2014-07-04 test423456243

'width'와'height' 속성을 사용하고있는 것이 아닙니까? http://jsfiddle.net/YvQ5c – nkmol

이 다음과 같은 CSS 규칙 추가 수정하려면 : : 나 이미지 추가 할 경우 여기에

코드입니다 기본적으로

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

를 페이지는이 원인 때문에 foolowing 위쪽 여백이있다 공백 문자가 있으면이 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>

그리고 전체 화면을 맞는 이미지를 얻을.

출처

2014-07-04 21:14:08

CSS를 어디에 넣어야 좋을까요? 여기에 전체 코드가 있습니다 https://github.com/edgaraxe/NostalgiaRPRequest/blob/master/index.html – test423456243

가장 쉬운 방법은''앞에 다음을 추가하는 것입니다 : –

작동하지 않았어요. 슬프게도! 그것은 여전히 동일합니다! – test423456243

조금 혼란스러워. 왜 그냥 배경 이미지를 사용하지 : url ('img url'); 그런 다음 background-size : 표지; 요소에 배경 이미지를 추가 하시겠습니까?

출처

2014-07-04 21:32:59 LittleB0Y

HTML로 크기를 조정하는 방법

답변

관련 문제