如何在调整浏览器大小时调整旋转木马？

我有一个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

如何在调整浏览器大小时调整旋转木马？

回答

相关问题