이미지로 페이지를 채우는 방법?

저는 기본적으로 전화 개발자이며 웹 프로그래밍에 대한 지식이 없습니다. 내가하려고하는 일은 고정 너비 (예 : 400 픽셀)와 증가하는 높이를 가진 모바일 앱의 브라우저 컨트롤에서 이미지의 너비와 높이를로드하는 것입니다. 해당 이미지는 여유 공간없이 브라우저 컨트롤을 완전히 채 웁니다.이미지로 페이지를 채우는 방법?

<script type="text/javascript"> 
    window.onload = function() { 
     var elem = document.getElementById('content'); 
     window.external.Notify(elem.scrollHeight + ''); 
    } 
</script> 
<div id="content"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> 
    <img src="http://www.reactiongifs.com/r/iwsyih.gif" /> 
</div>

이것은 이미지가있는 페이지를 채우지 않으며 폭도 400이 아닙니다. 감사합니다.

출처

2014-02-25 user3293835

브라우저 컨트롤의 의미가 확실하지 않습니다. 한 가지 방법은 CSS를 통해 div 요소의 크기와 크기를 설정하고 CSS 속성을 통해 배경 이미지를 설정하는 것입니다. 예를 들어

<div style=' /* more CSS */ background-image:url("foo.png");'></div>

는

출처

2014-02-25 17:13:24 mvw

http://www.w3schools.com/css/css_background.asp를 참조 할 수 있습니다 코드에 어떤 스타일 : 나는 브라우저 컨트롤하여 창 영역을 의미 같은데요

<style> 
image{ 
    position: absolute; 
    height :100% 
    width: 100%; 
} 
</style>

출처

2014-02-25 17:16:26

. 그렇다면, 당신은 <body> 태그에 대한 background-image을 설정하고 background-size: cover에 전체 면적 감사를 채울 수 :

body { 
    background: url(http://www.reactiongifs.com/r/iwsyih.gif) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    /* IE8 and older hack */ 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 
}

이 새로운 CSS3 기능입니다, 그래서 당신은 브라우저 특정 접두사 (webkit, moz를 사용해야하고 o). 이 솔루션은 IE8 이상에서는 작동하지 않으므로 filter 해킹을 추가해야합니다 (코드 참조).

HERE'S이 방법에 대한 전체 기사

기사에서 설명했듯이 가능한 스크롤 막대 및 링크 문제로 인해 IE에 대해 설명한 filter 메서드를 사용하는 것이 안전하지 않을 수 있습니다. 문제가 발생하면 <body> 태그가 아닌 <div>에 배경을 적용하여 해결할 수 있습니다.이 너비는 너비와 높이가 100 %로 확대됩니다. 이 경우 당신은 html 및 body에 대해서도 100 % 너비와 높이를 추가하는 것을 기억해야합니다

html, body { 
    width: 100%; 
    height: 100%; 
} 
#bg-image { 
    width: 100%; 
    height: 100%; 

    /* additional styles to let the div serve as a background, not spoiling the layout */ 
    position: absolute; 
    z-index: -1; 

    background: url(http://www.reactiongifs.com/r/iwsyih.gif) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    /* IE8 and older hack */ 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')"; 
}

예 HTML을 :

<html> 
    <head> 
     (...) 
    </head> 
    <body> 
     <div id="bg-image"></div> 

     (...) 
    </body> 
</html>

출처

2014-02-25 17:22:52 matewka

내가 무엇을 당신이하려고하는 것은 더 적합하다고 생각 CSS 해결책 ... 아래에 문제를 해결할 코드를 추가했습니다. 고정 폭을 설정하지만 높이를 변경하는 것은 이미지가 왜곡 될 수 있으므로 최상의 아이디어는 아닙니다. 어쨌든, 콘텐츠 컨테이너를 커버하기 위해 배경 이미지 설정을위한 CSS를 포함 시켰습니다. 당신은 내가 예상대로 작동하지 않습니다이 코드없이, 및 코드에 태그를 추가 발견 했겠지만

<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> 
     <style> 
      /* # represents an id */ 
      #content{ 
       max-width: 400px; /* this is your restricted width that you are desiring */ 
       width: 100%; /* if you want the image to cover the whole screen regardless of the device */ 
       height: 100%; 
       background: url(http://www.reactiongifs.com/r/iwsyih.gif) no-repeat center center fixed; 
       -webkit-background-size: cover; 
       -moz-background-size: cover; 
       -o-background-size: cover; 
       background-size: cover; 
      } 
     </style> 
    </head> 
    <body>  
     <div id="content"> 
      <img src="http://www.reactiongifs.com/r/iwsyih.gif" /> 
     </div> 
     <script type="text/javascript"> 
      window.onload = function() { 
       var elem = 
       document.getElementById('content'); 
       window.external.Notify(elem.scrollHeight + ''); 
      } 
     </script> 
    <body> 
</html>

: 여기에 전체 코드입니다. 이 코드을 복사하여 지나갈 수 있어야합니다. 희망이 도움이 :).

출처

2014-02-25 17:53:46

이미지로 페이지를 채우는 방법?

답변

관련 문제