如何在調整瀏覽器大小時更改幻燈片圖片？

我不知道如何改變幻燈片的圖像時，我去手機屏幕的大小。我用BootStrap建立我的第一個網站。它在電腦上看起來不錯，但當我改變屏幕尺寸時，整個圖像的比例很小，當屏幕尺寸發生變化時，是否有任何想法替換幻燈片中的顯示圖像？我需要改變它的CSS代碼，感謝如何在調整瀏覽器大小時更改幻燈片圖片？

<!DOCTYPE html> 
<html lang="en"> 
<head></head> 

<!-- Carousel 
================================================== --> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <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> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img class="first-slide" src="image/N-house000.jpg" alt="First slide"> 
      <div class="container"> 
       <div class="carousel-caption"> 
        <h1>IntopHome LTD</h1> 
        <p><a class="btn btn-lg btn-primary" href="contact.html" role="button">CONTACT US</p></a> 
       </div> 
      </div> 
     </div> 
    </div> 
</html>

來源

2016-12-15 Shiliang Fang

你不需要'body'標籤？ –

嗨，那裏，它有身體標記，我只是複製我的code.not全部的一部分。 –

使用媒體查詢並更改不同分辨率下圖像滑塊的高度寬度，或者可以使用bootstrap/MDL作爲響應式設計。 –

你必須使用css media queries如果必須只用CSS處理它，

我對你的建議是初始化2個不同的滑塊頁，其中包含高移動顯示圖像，在你的CSS查詢簡單地隱藏一個用於臺式機和移動設備上展示一個，

CSS例子：

@media only screen and (max-width: 990px) { 
    .desktop_slider{display:none; visibility: hidden;} 
    .mobile_slider{display:block; visibility: visible;} 
}

來源

2016-12-15 11:24:54

Awsome，謝謝！ –

如何在調整瀏覽器大小時更改幻燈片圖片？

回答

相關問題