역동적 인 크기의 중심 이미지에 대한 Twitter 부트 스트랩 이미지 캐 러셀 확장 방법

Question

가로 및 세로 중심의 동적 크기 이미지 (최대 500x400)를 지원하도록 기본 부트 스트랩 이미지 회전식 메뉴를 확장하려고합니다. 또한 캡션 div가 이미지의 맨 아래에 고정되는 원래의 캡션 레이아웃을 유지하고 싶습니다. 캡션 div는 이미지 전체에 걸쳐 확장됩니다 (단, 더 이상 없습니다).

나는

http://jsfiddle.net/rdugan/JFBFU/26/

나는 비교적 쉽게 추가하여 수평 중심 및 자막 요구 사항을 수행 할 수 있습니다, 이는 (CSS의 섹션의 끝 부분에만 4 개의 추가 스타일이있는) 기본 부트 스트랩 설정의 상당히 깨끗한 구현 이미지와 캡션을 둘러싼 '인라인'div를 사용하고 부모에게는 'text-align : center'를 사용합니다. 그러나 수직 센터링은 항상 문제가 남아 있습니다. (항상 그렇듯이)

다른 방법으로 다양한 div로 'display : table-cell'(및 함께 제공되는 센터링 스타일)을 시도해 보았습니다. 사례 나는 회전식 기능을 엉망으로 만든다. 다른 사람들은 이미지 센터링을 수행하지만 캡션 앵커링은 잃어 버린다.

힌트를 주시면 감사하겠습니다. 꽤 오랜 시간 동안 내 머리를 두 드렸습니다.

당신은이 규칙을 수평으로 중앙 수

Answer 1

:

.carousel - 내부 {텍스트 정렬 : 센터; }

. 카르텔. 항목> img {display : inline-block; } 수직 정렬을 위해

당신은 체크 아웃해야이 : http://www.student.oulu.fi/~laurirai/www/css/middle/

그리고 당신은 단지에서만 폭이나 이미지의 높이 둘을 변경해야 크기 조정에 이미지의 가로 세로 비율을 유지하기위한 시간은 원래 비율로 크기가 조절됩니다. 그러나

.carousel .item { 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

다음 * .html 중에서에서는

: 다음 * .CSS에서

<div class="item" style="background-image: url('[path-to-image].png')"> 
    <!-- omit the <img> tag --> 
    <!-- the rest of the stuff that was in the <div> goes here --> 
</div> 

Answer 2

회전 목마 항목이 포함 된 div에서 직접 CSS 배경 속성을 사용하여 이것은 회전 목마 탐색 화살표를 깰 것 같다.

Answer 3

나를 좋게 이미지를 스트레칭하는이가 작동이 조각

.carousel-inner > .item > img { 
    min-width: 100%; 
}