Как изменить изображение слайда при изменении размера браузера?

Я понятия не имею, как изменить изображение слайдов при выборе размера экрана телефона. Я использовал 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' тег? –

привет, там, у меня есть тег тела, я просто копирую часть своего кода. Не все. –

Используйте медиа-запрос и измените ширину высоты вашего слайдера изображения на разное разрешение или вы можете использовать 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, Спасибо! –

Как изменить изображение слайда при изменении размера браузера?

ответ

Смежные вопросы