화면보다 큰 이미지를 센터링하는 방법은 무엇입니까? 내가 다음 코드를했습니다

:화면보다 큰 이미지를 센터링하는 방법은 무엇입니까? 내가 다음 코드를했습니다

HTML은

<div class="banner"> 
    <img src="banner.png"> 
</div>

이미지가 3000px의 폭과 200 픽셀 의 높이가

.banner > img { 
    margin: auto; 
}

CSS 나는 이미지가 수평 원하는 수평 스크롤 막대가 없습니다.

방법이 많이 ... (브라우저의 크기 조절은 아무 문제한다)

은 내가 .banner 배경 이미지와 배너 이미지를 div에 제공하기 위해 시도하지했지만 다음 사업부는 크기가 자동입니다 찾을 수 없습니다 가능한?

출처

2014-09-03 fechnert

배경을 설정하면 30x2 투명 이미지를 사용하고 너비를 100 %로 설정하여 이미지를 차지할 수 있습니다. div의 공간의 정확한 크기 – Huangism

[div의 중심 크기가 큰 이미지] 가능한 복제본 (http://stackoverflow.com/questions/14562457/center-overversized-image-in-div) – Bojangles

' ', 이것을 표기 한 복제본을보십시오. 배경 이미지를 사용할 수있는 경우 CSS 배경 이미지로 ['background-size : cover'] (https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)를 시도하십시오 – Bojangles

<div class="banner"> 
</div>

CSS :이 같은

.banner { 
    background: url(http://ximg.es/3000x200/000/fff.png) no-repeat 50% 50%; 
    height:200px; 
}

: jsfiddle

출처

2014-09-03 18:14:13 nicogaldo

그러나'50 % 50 %'대신'center'을 사용했습니다. – fechnert

배경으로 이미지를 사용하지만/필요 이미지를 사용하려는 경우,이

처럼 그것을 할 귀하의 최선의 선택

.banner{overflow:hidden; height:200px; width:100%; text-align:center;} 
.banner img{width:100%; height:100%; margin:0 auto;}

출처

2014-09-03 18:17:45 Devin

나는 CSS에서 이미지의 정확한 크기를 설정하고 싶지 않습니다. 동적으로해야합니다 – fechnert

귀하의 게시물에 고정 된 크기를 언급. 어쨌든, 더 나은 방법은 제가 언급 한 것처럼 이미지를 배경으로 사용하는 것입니다. – Devin

화면보다 큰 이미지를 센터링하는 방법은 무엇입니까? 내가 다음 코드를했습니다

답변

관련 문제