이미지 가로 세로 비율을 유지하는 부트 스트랩 캐 러셀

내 웹 사이트에 부트 스트랩 캐 러셀이 있습니다. 작은 화면에서 크기를 조정할 때 이미지 가로 세로 비율을 유지하려고합니다. 이 작업을 수행하는 방법? , 이미지 가로 세로 비율을 유지하는 부트 스트랩 캐 러셀

<!-- Carousel 
================================================== --> 
<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
    <div class="item active"> 
     <img src="img/bg_good_sex2.jpg" class="img-responsive" alt="verslaafd-aan-porno-goede-seks"> 
     <div class="container"> 
     <div class="carousel-caption"> 
      <h1>Sex Coach <span class="text-primary"> App 
      </span></h1> 
      <p>Krijg controle op porno- of seksverslaving</p> 
      <p><a href="<?php echo SSL_DOCUMENT_ROOT ?>/register.php" class="btn btn-lg btn-primary"><i class="icon-chevron-sign-right"></i> <?php echo START_BTN ?></a></p> 
      <p><a href="<?php echo SSL_DOCUMENT_ROOT ?>/survey_me.php" class="btn btn-success btn-primary btn-lg"><i class="icon-edit"></i> <?php echo BTN_SURVEY_ME ?></a></p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div><!-- /.carousel -->

감사합니다 프레드

출처

2013-12-15 Fred30

상기 한 바와 같이

/* Carousel image resize */ .carousel-inner > .item > a > img, .carousel-inner > .item > img { width: 100%; }

그것의 중요한 같은 클래스와 정확한 코드를 사용 할 수 있습니다. – Jon

가능성이 높습니다 : http://stackoverflow.com/questions/17290701/maintain-image-aspect-ratio-in-carousel –

@MikeCauser,이 솔루션은 고정 500px 높이가 있습니다. 작은 크기의 디스플레이에서 컨테이너의 전체 내용 (이미지 및 텍스트)을 줄이기를 원합니다. – Fred30

<img>에 다음과 같은 스타일을 추가

는 여기에 몇 가지 코드입니다. 이렇게하면 대형 브라우저에서 종횡비가 유지됩니다.

max-width: 100%; 
width: auto; 
height: auto; 
vertical-align: middle;

또 다른 옵션은 내가 크롬 개발 도구를 사용하여 행운을하지 않고 위의 답과 많은 다른 사람을 시도했지만 의해 한 배경 이미지 <div> 년대를 사용하고 background-size: cover

출처

2013-12-15 11:39:25

을 사용하는 것입니다, 내가 왔어요 이 짧은 해결책. 이뿐만 아니라 당신을 위해 작동 희망 : 당신은 독자가 당신을 도울 수있는 당신의 회전 목마의 단순화 된 버전을 추가 할 수

출처

2015-05-06 04:23:46

이미지 가로 세로 비율을 유지하는 부트 스트랩 캐 러셀

답변

관련 문제