Twitter 2.2 캐 러셀 예 : 이미지 비율을 유지하는 방법?

http://twitter.github.com/bootstrap/examples/carousel.html에있는 동안 창 브라우저 너비를 줄이면 배경 이미지 종횡비가 변경되는 것을 알 수 있습니다. 이미지를 1 : 1로 유지하고 이미지를 왼쪽 또는 오른쪽으로 자르거나 가로로 정렬하고 싶습니다.Twitter 2.2 캐 러셀 예 : 이미지 비율을 유지하는 방법?

무엇을 제안합니까?

출처

2012-11-02 Francesco Frassinelli

아니요,이 질문을 잘못 이해 했습니까? – Richlewis

@Richlewis 다르다 :이 문제는 부트 스트랩 반응 스타일 시트와 관련이있다. 그것을 시도하십시오;) –

당신은 2 옵션을 가지고, 둘 다 이미지 비율 유지 :

옵션 1

background: url(yourimage.jpg) no-repeat center center/cover;

마지막 부분은 background-size: cover 재산입니다. 브라우저의 너비에 따라 배경 이미지를 확대하여 전체 div를 채 웁니다.

예 : http://i.imgur.com/0tQ9Rxm.png

옵션 2

background: url(yourimage.jpg) no-repeat center center;

그것은 부분적으로 같은 효과하지만 줌 않고 있습니다. 배경은 측면을 유지하면서 가운데에 머물러 있지만 브라우저 너비가 이미지 너비 (이 경우 1500 픽셀)보다 크면 배경색 (이 경우 흰색)을 보게됩니다.

예 : http://i.imgur.com/6x594jH.png

나는 옵션 1에게 추천합니다. 브라우저의 크기를 조정해도 확대/축소 효과가 나타나지만 거의 아무도 그렇지 않으면 방문자는 채워진 배경 만 볼 수 있습니다.

출처

2013-01-31 03:23:31 jgthms

첫 번째 옵션은 내가 필요로하는 것이지만 두 번째 옵션은 또한 흥미 롭습니다. 감사합니다 :) –

가로 세로 비율의 변화보다 훨씬 낫습니다! 하지만보기/화면의 크기가 너무 작아지면 (예 : iPhone에서) 이미지가 잘립니다. –

@jgthms '의 후속 조치로 옵션 1을 사용했습니다. 그러나 iOS Safari에서는 배경 이미지가 전혀 표시되지 않았습니다. 한 줄짜리 CSS 구문이 훌륭하게 작동하지 않는 것 같습니다. CSS를 여기에서 활동하기 시작하는 경우 나처럼,보고하지 않은 사람, 사람들을 위해

background: url(yourimage.jpg) no-repeat center center; 
background-size: cover;

출처

2013-02-23 19:09:43 danhbear

(아이폰 OS 스타일로)는 상황에 맞는 예제 : 다음으로 변경하여 나는이 작업을 얻을 수 있었다 . 이 부트 스트랩 3.1.1 사용하고 있음을 유의해야합니다.

<div class="item active" style="background: url(slide1.jpg) no-repeat center center; background-size: cover;"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <p>Example text 
      <a class="btn btn-lg btn-primary" href="YourURLHERE" role="button">YourLink</a> 
      </p> 
     </div> 
     </div> 
    </div>

출처

2014-02-22 06:19:01

Twitter 2.2 캐 러셀 예 : 이미지 비율을 유지하는 방법?

답변

관련 문제