如何在調整瀏覽器大小時調整旋轉木馬？

我有一個Bootstrap輪播3張圖片（480x320px）。傳送帶的寬度本身設置爲480px。調整瀏覽器大小時如何縮放輪播？如何在調整瀏覽器大小時調整旋轉木馬？

.carousel{ 
    width: 480px; 
    margin: auto; 
} 

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
    width: 100%; 
    margin: auto; 
}

謝謝！

來源

2016-08-04 Deniss Muntjans

你需要讓你的.carousel類作爲100%的寬度..

你需要做下面的改變你的CSS，

.carousel{ 
    width: 100%; 
    margin: auto; 
} 

.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
    width: 100%; 
    margin: auto; 
}

但是如果你想要讓他們在480x320px最初和想要在瀏覽器調整大小時處理它們，那麼您需要進行媒體查詢。

/* For devices which are smaller than 960 pixels */ 
@media only screen and (max-width: 959px) { 
    //Write your CSS here. 
} 

/* For Tablets */ 
@media only screen and (min-width: 768px) and (max-width: 959px) { 
    //Write your CSS here. 
} 

/* For all mobiles */ 
@media only screen and (max-width: 767px) { 
    //Write your CSS here. 
} 

/* Mobile Landscape Size to Tablet Portrait */ 
@media only screen and (min-width: 480px) and (max-width: 767px) { 
    //Write your CSS here. 
} 

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 
@media only screen and (max-width: 479px) { 
    //Write your CSS here. 
}

希望這有助於！

來源

2016-08-04 18:48:05

我想在完整的瀏覽器屏幕上顯示480x320px的輪播/圖片，但是當您開始調整大小時，瀏覽器輪播/圖片也會縮小。 –

然後，您需要選擇編寫媒體查詢。檢查我上面的更新的答案。 –

它可能是一個簡單的寬度：100％;在CSS上，並對其應用img-responsive可能會修復它。

讓我知道！

來源

2016-08-04 18:45:19 Lazarus

如何在調整瀏覽器大小時調整旋轉木馬？

回答

相關問題