화면 중앙보다 이미지의 중앙이 넓고 브라우저의 이미지 크기가 줄어 듭니다.

Question

Hello CSS 전문가의 stackoverflow입니다. 나는 문제에 갇혀 있고 아마도 CSS로는 불가능하다고 생각합니다. 브라우저 크기가 이미지의

#main-graphic { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

2) 센터 이미지 및 작물 측면 등의 변경으로

1) 동적 스케일 이미지 :

나는이 두 가지 규칙을 결합과 같은 이미지에 모두 적용 할 브라우저가 작아진다

#main-graphic { 
    width: 2560px; 
    height: 100%; 
    margin-left: -1280px; 
    left: 50%; 
    position: relative; 
} 

하지만 내가 어떻게 단지 CSS와 함께이 작업을 수행합니까? 아니면 불가능한가요?

Answer 1

최대/최소 너비 (및 높이)를 잘 사용해야합니다.

Here is a good place to start.

Answer 2

당신은 예를 들어 빈 DIV에 배경 이미지로 이미지를 사용할 수 있습니다. 나는 당신이 그것을 어떻게 원하는지에 대해 완전히 확신하지는 않지만, 이와 같은 것이 당신의 필요에 부합 할 수 있습니다.

HTML 나는 당신이 이미지 크기를 조정하고 싶지 않은 가정하고 두 번째 코드 블록의 폭을 설정하여

<div class="img"></div> 

CSS

.img { 
    max-width: 2560px; 
    width: 100%; 
    height: 100%; 
    background-image: url('whatever.jpg'); 
    background-size: contain; 
} 

Answer 3

.

이 관계없이 브라우저 폭이 그것을 수용하지 않을 경우 페이지 너비 및 작물 측면의 중심 이미지를 유지하는 것입니다 ...

#main-graphic { 
    display: inline-block; 
    background-image: url('http://cux.waspdigital.com/wp-content/themes/creativeux/_/img/home-main.jpg'); 
    width: 100%; 
    height: 228px; 
    background-repeat: no-repeat; 
    background-size: 1280px 228px; 
    background-position: 50% 0; 
}​ 

<div id="main-graphic"></div>​ 

http://jsfiddle.net/Xt2vM/