배경 이미지

크기가 1900 × 1080의 화상 내 화면 크기 1366x768 배경 배경배경 이미지

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <style> 
     html,body { 
    height:100%; 
} 
     #imageHolder{ 
      background-size:100% auto; 
      background-image:url(img/bg2.jpg); 
      width:100%; 
      height:30%; 
     } 
    </style> 
</head> 
<body> 
    <div id="imageHolder"></div> 
</body> 
</html>

같이 DIV 사용되고 그것이 보여 완전한 이미지 폭은 있지만 분명히 완전한 높이는 아닙니다. 이제 div는 이미지의 일부를 보여 주며 브라우저 크기를 변경하더라도 이미지의 해당 부분을 정확하게 표시하려고합니다. 이제 브라우저 크기 (보통보다 작은 너비)를 변경하면 div의 크기가 조정되고 이미지도 크기가 조정되지만 크기가 조정 된 이미지에는 이전에 표시되지 않은 이미지의 부분이 표시됩니다.

최대화 된 브라우저 창 에서처럼 이미지의 동일한 부분을 얻을 수 있습니까?

출처

2016-12-26 Novice

당신이 방법은'배경 - position' 속성을 재생하는 것입니다. 기본적으로 이미지는 왼쪽 상단에 정렬되지만 '50 % 50 %'(가운데/중앙) 또는 '50 % 100 %'(가운데/아래) 등과 같이 변경할 수 있습니다. –

당신은 당신의 스타일 시트

background-repeat:no-repeat; 
background-size:cover;

가 괜찮다는 아래의 조각을 추가 작동에 아래에 주어진 CSS 속성을 추가 할 수 있습니다.

html,body{ 
 
    height:100%; 
 
    width:100%; 
 
    } 
 
#imageHolder{ 
 
      width:100%; 
 
      height:100%; 
 
      /* background-image: url("https://i.stack.imgur.com/wwy2w.jpg"); 
 
      background-repeat:no-repeat;*/ 
 
    background: url("https://i.stack.imgur.com/wwy2w.jpg") no-repeat center center fixed; 
 
      background-size:cover; 
 
    border:1px solid #000; 
 
      
 
    }

<div id="imageHolder"></div>

출처

2016-12-26 15:02:58

동일한 문제 브라우저 창 크기를 조정할 때 브라우저 창을 최소 너비로 줄이고 전체 이미지가 표시 될 때까지 (전폭으로) 보이지 않는 더 많은 이미지가 표시됩니다. 이전에 보이지 않았던 이미지 부분을 보여줍니다. – Novice

@Nevice check now –

아니요 작동하지 않습니다. 윈도우의 크기에 따라 이미지를 다소 포함합니다. 나는 정확히 같은 이미지를 보여주고 싶다. – Novice

-1

사용이

#imageHolder{ 
      background-image:url(img/bg2.jpg); 
      width:100%; 
      height:30%; 
      background-size: cover; 
     }

출처

2016-12-26 15:10:10

background-repeat:no-repeat; 
background-size:cover; 
background-position: center center;

당신이 원하는 이미지의보다 정확한 부분을 얻기 위해 상단, 하단, 좌우와 중앙 센터를 대체 할 수 있습니다 크기 조정 중. 만약 설명

출처

2016-12-26 15:13:29 evilgenious448

좌표면에서 특정 창일 수 있습니까? – Novice

그래, 당신은 백분율 또는 화소조차 할 수있다, 더 많은 정보를 원하면 , 여기를 읽으십시오 : [link] http : //www.w3schools.co.kr/cssref/pr_background-position.asp – evilgenious448

초기 레이아웃

768 윈도우 높이의 높이/폭 비를 갖는 * 30 % 높이 = 230 픽셀 (높이)

230 픽셀 높이/1,366 픽셀 폭 = 0.168

자, 패딩 트릭을 사용하여 div에이 비율을 설정합니다.

이 레이아웃에서는 이미지의 상단이 항상 표시됩니다. 기본적으로 시작 부분에 표시되는 내용이므로 요청한 내용입니다.

당신이 이미지의 다른 부분을 볼 수 원하는 배경-위치를 조정 다만 경우에 따라

html, 
 
body { 
 
    width: 100%; 
 
    margin: 0px; 
 
    
 
} 
 
#imageHolder { 
 
    background-size: 100% auto; 
 
    background-image: url(http://lorempixel.com/1900/1080); 
 
    width: 100%; 
 
    height: 0px; 
 
    padding-top: 16.86%; 
 
}

<div id="imageHolder"></div>

출처

2016-12-26 20:25:46 vals

귀하의 기술로 나는 내가 찾고있는 것을 얻을 수 있다고 생각합니다. 이 문제는 전체 이미지 너비가 표시되지 않는 유일한 문제입니다. 어떻게 알지는 못했지만 화면 크기 (화면 크기보다 큼)가 화면 (100 % 너비)에 맞게 조정되어야합니다. – Novice

배경 이미지

답변

관련 문제