Bootstrap旋轉木馬響應img

我想在旋轉木馬響應img。高度應該是100vh，但寬度需要儘可能寬，取決於img的大小。溢出部分應該隱藏起來。現在，當屏幕變小時，img的大小不會縮放。下面是一些屏幕截圖Bootstrap旋轉木馬響應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 -->

來源

2017-03-17 Chicky Egg

對於你應該使用圖像作爲'背景image'不是IMG SRC。 – vivekkupadhyay

看看這個方法https://jsfiddle.net/wamosjk/6s5u8de1/ –

如果您使用img src="..."，然後用class="img-responsive"和CSS width="100%"。

來源

2017-03-17 05:01:51

試試這個：

檢查演示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; 
}

來源

2017-03-17 07:55:24

需要改變的img的CSS請

.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 -->

來源

2017-03-17 09:30:28

有一個更好的和非常簡單的做到這一點。保留所有您的輪播代碼在一行內的引導列內（網格系統）並在我的示例中給出一些類名稱，如.carousel-column，然後執行兩項操作。

1.在您的自定義css文件中根據您的願望設置一些高度和寬度。 2.在您的代碼中設置img-responsive用於輪播物品的郵件HTML頁面。

它爲我工作，希望它能爲所有人工作。

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>

現在做這在CSS文件

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

來源

2017-11-25 08:55:23 emmei

Bootstrap旋轉木馬響應img

回答

相關問題