부트 스트랩 회전 목마 반응성 img

Question

나는 회전 목마에 반응성이있는 img를 갖고 싶습니다. 높이는 100vh 여야하지만 너비는 img가 얼마나 큰가에 따라 넓어야합니다. 넘치는 부분은 숨겨져 있어야합니다. 이제 화면이 작아지면 크기가 조정되지 않고 크기가 조정됩니다. 다음은 몇 가지 스크린 샷

이 전체 폭, 데스크톱 버전

이 정제의 witdh에 관한에서 괜찮은,하지만 내가 원하는 해달라고 아래쪽에 공백이 있습니다.

크기는 조정되지만 크기는 조정되지 않습니다. 또한 전체 창을 차지해야하지만 넘치는 너비는 숨길 수 있습니다.

이것은 내가 CSS를 위해 무엇을 가지고 :

.carousel, 
 
.carousel-inner { 
 
    height: 100vh; 
 
} 
 

 
.carousel img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    min-width: 100vw; 
 
    height: 100vh; 
 
    max-width: none; 
 
}

<div class="carousel-inner" role="listbox"> 
 
         <div class="item active"> 
 
          <img class="img-responsive" src="photos/JO2_2978.JPG" alt="xmas_orchestra"> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/JO2_2875.JPG" alt="..."> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/IMG_1824.JPG" alt="..."> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/JO2_2955.JPG" alt="..."> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/IMG_3913.JPG" alt="..."> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/JO2_2957.JPG" alt="..."> 
 
         </div> 
 

 
        </div> <!-- CAROUSEL-INNER -->

Answer 1

당신이 img src="..."를 사용하는 경우는, 다음 class="img-responsive"를 사용하여 CSS를 width="100%"에.

Answer 2

이 시도 :

확인 데모 here

HTML :

<div class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active" style="background-image:url(http://dentistry.utah.edu/images/slider-banner/roy-hume.jpg); "> 
    </div> 
    <div class="item" style="background-image: url(http://dentistry.utah.edu/images/slider-banner/school-dentistry-students.jpg);"> 
    </div> 
    </div> 
    <!-- CAROUSEL-INNER --> 
</div> 

CSS :

.carousel, 
.carousel-inner { 
    height: 100vh; 
} 

.item { 
    border: 1px solid grey; 
    max-height: 100vh; 
    min-height: 100vh; 
    max-width: 100vw; 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
} 

Answer 3

것이 확인하세요 CSS를 IMG 변경해야

.carousel, 
 
.carousel-inner { 
 
    height: 100vh; 
 
} 
 

 
.carousel img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    min-width: 100%; 
 
    height: auto; 
 
    max-width: 100%; 
 
}

<div class="carousel-inner" role="listbox"> 
 
         <div class="item active"> 
 
          <img class="img-responsive" src="photos/JO2_2978.JPG" alt="xmas_orchestra"> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/JO2_2875.JPG" alt="..."> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/IMG_1824.JPG" alt="..."> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/JO2_2955.JPG" alt="..."> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/IMG_3913.JPG" alt="..."> 
 
         </div> 
 
         <div class="item"> 
 
          <img src="photos/JO2_2957.JPG" alt="..."> 
 
         </div> 
 

 
        </div> <!-- CAROUSEL-INNER -->

Answer 4

은 더 나은이 작업을 수행하는 매우 간단한 있습니다. 모든 회전식 코드를 행의 부트 스트랩 열에 유지하십시오 (그리드 시스템) 그리고 제 예제에서 . 칼러셀 열과 같은 클래스 이름을 지정하고 두 가지 작업을 수행하십시오.

1. 사용자 정의 CSS 파일에서 원하는대로 높이와 너비를 설정하십시오. 2. 회전 목마 항목에 대한 메일 HTML 페이지의 코드에 img-responsive을 설정하십시오.

그것은 나를 위해 일했습니다. 그것이 모두에게 도움이되기를 바랍니다.

HTML CODE: 
<!-- Carousel to highlight main services--> 
    <div class="row"> 
     <div class="col-md-9 carousel-column"> 
    <div id="myCarousel" class="carousel slide"> 
     <!-- 1.Carousel Indicators--> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" class="active" data- 
slideto="0</li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
      <li data-target="#myCarousel" data-slide-to="2"></li> 
     </ol> 

     <!-- 2.carousel Items (Picture plus data)--> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="images/book2.jpg" class="img-responsive img-cus" > 
       <div class="container"> 
        <div class="carousel-caption"> 
         <h1>Web Development</h1> 
         <h3>Let's begin development.It really is about who you are and what you can do</h3> 
         <p><a class="btn btn-primary btn-large" href="signup.html">Sign Up</a></p> 
        </div> 
       </div> 
      </div> 

      <div class="item"> 
       <img src="images/book.jpg" class="img-responsive img-cus"> 
       <div class="container"> 
        <div class="carousel-caption"> 
         <h1>Twitter Bootstrap</h1> 
         <h3>A HTML,CSS,Javascript library for responsive 
mobile first web development</h3> 
         <p><a class="btn btn-primary btn-large" 
href="signup.html">Sign Up</a></p> 
        </div> 
       </div> 
      </div> 

      <div class="item"> 
       <img src="images/coffee.jpg" class="img-responsive img-cus" 
> 
       <div class="container"> 
        <div class="carousel-caption"> 
         <h1>Java Tutorials</h1> 
         <h3>A powerful secure server side object oriented 
programming language</h3> 
         <p><a class="btn btn-primary btn-large" 
href="signup.html">Sign Up</a></p> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- Now We will create the carousel controls--> 
     <a href="#myCarousel" class="left carousel-control" data- 
slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
     </a> 

     <a href="#myCarousel" class="right carousel-control" data- 
slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
     </a> 
    </div> 
     </div> 
    </div> 

지금 당신이 배경-image`하지 IMG의 SRC '로 이미지를 사용해야하는 경우 CSS 파일

CSS Styling: 
     .carousel-column{ 
     height:500px; 
     width:900px; 
     margin:0 auto; 
     }