2017-10-24 5 views
0

내가 100 % 폭에서 잘 작동 부트 스트랩 회전 목마를 사용하고 부트 스트랩 회전 목마로 크기를 조정하지 않고, 나는 내 코드이미지가있는

<div id="myCarousel" class="carousel slide" data-ride="carousel" style="max-width:1000px;height:360px;"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators" style="display: none;"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 

     <div class="item active"> 
     <img src="images/9.jpg" alt="Los Angeles" style="max-width:1000px;height:360px;"> 
     <div class="carousel-caption"> 
      <h3>Los Angeles</h3> 
      <p>LA is always so much fun!</p> 
     </div> 
     </div> 

     <div class="item"> 
     <img src="images/10.jpg" alt="Chicago" style="max-width:1000px;height:360px;"> 
     <div class="carousel-caption"> 
      <h3>Chicago</h3> 
      <p>Thank you, Chicago!</p> 
     </div> 
     </div> 

     <div class="item"> 
     <img src="images/11.jpg" alt="New York" style="max-width:1000px;height:360px;"> 
     <div class="carousel-caption"> 
      <h3>New York</h3> 
      <p>We love the Big Apple!</p> 
     </div> 
     </div> 
     </div> 

<!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
     <span class="sr-only">Next</span> 
    </a> 
    </div> 

입니다

그것의 높이와 폭을 줄일 필요

지금 나는 내 욕망의 높이를 얻고 있지만 이미지는 나에게 같은 결과를주고 촬영 한이 화면에서 볼 수 있듯이 주어진 폭으로 스트레칭되지

https://screenshots.firefox.com/IjKqguGjIUp4pgY0/localhost

+0

Bootstrap Documentation v4.0에서입니까? 슬라이더보다 더 큰 치수의 이미지를 사용해야하거나 이미지가 늘어나거나 뒤 틀릴 수 있습니다. – ProEvilz

+0

sir idk 그냥 원하는 이미지가 내 욕망 차원에 분명해야합니다 –

+0

어떤 부트 스트랩 버전을 사용하고 있습니까? – Aaqib

답변

2

이미지의 너비는 100%입니다. 아래 코드를 업데이트하십시오. 부트 스트랩에서

<img src="images/9.jpg" alt="Los Angeles" style="width:100%; max-width:1000px;height:360px;"> 
+0

작동하지만 이미지가 이렇게 늘어났습니다 –

+0

https://screenshots.firefox.com/gKhFrMuQLuIaemEt/localhost 해결할 수 있습니까? –

1

이미지 .IMG 유체와 반응 만들어집니다. 최대 너비 : 100 %; 높이 : 자동; 이미지에 적용되어 의 부모 요소로 크기가 조정됩니다.

당신이 좋아하는 .IMG 유체 사용할 수 있습니다

<img src="..." class="img-fluid" alt="Responsive image"> 

위 오른쪽, 당신은/워프 이미지를 가지고 행복 스트레치있어