Question

我有一张带有3张图像（480x320px）的Bootstrap轮播。旋转木马本身的宽度设置为480px。如何在调整浏览器大小时缩放轮播？

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

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

谢谢！

Answer 1

您需要将.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.
}

希望这有帮助！

Answer 2

可能是一个简单的宽度：100％;在CSS上，并应用img-response来解决它。

让我知道！

调整浏览器大小时如何缩放轮播？

2 个答案: