CSS : 다른 화면 해상도에서의 이미지 위치 수정

사이트에서 HTML 및 CSS를 사용하여 다른 이미지를 단순히 차단하는 것입니다. 더 작은 해상도에서는 화면 오른쪽으로 이동하는 데 문제가 있습니다. http://i.imgur.com/hsGT14m.jpg CSS : 다른 화면 해상도에서의 이미지 위치 수정

그러나 것 같습니다 낮은 해상도 (1280X1024)에서 : http://i.imgur.com/byeK41B.jpg이

전체 페이지의 HTML 코드는

는

실제 이미지 내가 원하는 (그리고는 1600x1024 해상도로 표시)가 너무처럼 보인다 다음과 같이

는

<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="thrall.css"> 
    </head> 
    <body> 

    <img src="images/background.jpg" width="1600" length="1200" class="bg"> 

    <img src="images/titlebox.jpg" class="titlebox"> 

    <img src="images/symbol.png" class="symbol"> 

    <img src="images/transbox.jpg" class="transbox"> 

    </body> 
    </html>

다음 전체 페이지의 CSS가 될 때 :

img.bg { 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1024px; 

    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 

    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: -2; 
} 

@media screen and (max-width: 1024px) { /* Specific to this particular image */ 
    img.bg { 
    left: 50%; 
    margin-left: -512px; /* 50% */ 
    } 
} 

img.titlebox { 
    /*Keep it bounded for different resolutions*/ 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 

    /*Position*/ 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin-left: -500px; 
    z-index: -1; 
} 

img.symbol { 
    /*Keep it bounded for different resolutions*/ 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 
    margin:auto; 

    /*Position*/ 
    position: absolute; 
    top: 5%; 
    left: 20%; 
    } 

    div.containsymbol { 
    width:100%; 
    margin:auto; 
    } 

    img.transbox { 
    /*Keep it bounded for different resolutions*/ 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 

    /*Opacity*/ 
    opacity:0.4; 
    filter:alpha(opacity=40); /* For IE8 and earlier */ 

    /*Position*/ 
    position: absolute; 
    top: 21.5%; 
    left: 50%; 
    margin-left: -500px; 
    z-index: -1; 
} 
    }

나는이 심볼의 절대 위치 및 그 상대 위치가 해결책이 될 수도에 문제가 있음을 수집,하지만 난 어떤 아니에요을 적용 할 수있는 해상도 myself9and 초래하는 방법을 볼 수있는 경험이 부족 현재 사용 중).

나는 여기에 충분한 정보를 제공해 주셨고 누군가가 줄 수있는 도움이되기를 바랍니다.

출처

2013-09-01 Extra Smooth

는 this-

<img src="images/background.jpg" style="width:100%; height:1200px;" class="bg">

어쩌면 작동보십시오! 그렇지 않다면 4 개의 이미지를 사이트에 사용하십시오.

출처

2013-09-01 19:30:51

죄송합니다. 기호 위치가 수정되지 않았습니다. 사용 된 4 개의 이미지는 다음과 같습니다. http://imgur.com/LHkfxSZ,T9Ku8uw,n3lCA81,ixA75OS –

전체 코드를 입력하십시오. –

주 기사에 추가했습니다. –

절대 위치 지정을 사용하는 경우 상위 요소 위치는 상대적이어야합니다. 그렇지 않으면 본문에 상대적으로 배치됩니다. 사진에 따라이 같은 뭔가를 찾고 :

또한

<html> 
<body style="margin:0;background:url(images/background.jpg) no-repeat fixed;background-size:100% 100%;"> 
    <div style="background:url(images/titlebox.jpg); width:80%; margin: 0 auto;"> 
     <img src="images/symbol.png" style="width:auto;margin:5%" alt="symbol"/> 
    </div> 
    <div style="background-image:url(images/transbox.jpg); width:80%; margin: 0 auto;min-height:200px;"> 
    </div> 
</body> 
</html>

당신은 IMG 태그 transbox.jpg 및 titlebox.jpg을 사용하는 대신 상자의 색상을 설정하는 CSS를 사용할 수 있습니다, 더 빨리 귀하의 사이트로드를 만들 것 .

출처

2013-09-01 19:41:01

나는 모든 HTML 코딩을 제공했다. 하지만 상자에 대한 팁 주셔서 감사합니다. –

@ExtraSmooth 내 코드 샘플을 사용해보고 도움이되는지 알려주세요. –

혼합 결과. 한편으로는 결의안 사이에 그 자리에 상징이 남아있었습니다. 다른 한편으로, 페이지는 이제 다음과 같이 보입니다 : http://i.imgur.com/4uHUMh0.jpg titlebox는 이미지 상단에 붙어 있지 않고, 트랜스 박스는 존재하지 않습니다. 모든 것이 전반적으로 너무 길다. 거기에 뭔가 좋은 것이있었습니다. –

CSS : 다른 화면 해상도에서의 이미지 위치 수정

답변

관련 문제