Как масштабировать карусель при изменении размера браузера?

Question

У меня есть карусель Bootstrap с 3 изображениями (480x320px). Ширина самой карусели установлена ​​на 480 пикселей. Как масштабировать карусель при изменении размера браузера?

.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-отзыв к нему, это может исправить.

Дайте мне знать!