Сделать фоновое изображение отзывчивым в CSS

Я пытался создать отзывчивый веб-сайт с нуля без использования каких-либо фреймворков, таких как bootstrap. я был баннер на моем сайте, для которого я установил фоновое изображение следующиеСделать фоновое изображение отзывчивым в CSS

<body> 
    <div id="pagewrap"> 
     <div class="test"> 
      <div class="headers"> 
       <div class="logo"> 
        <a href="#"><img src="images/logo.png" alt="Site Logo"/></a> 
       </div><!--logo--> 
       <div class="nav"></div><!--nav--> 
       <div class="slider_content"></div><!--slider_content--> 
      </div><!--header--> 
     </div> 
    </div><!--pagewrap--> 
</body>

.headers { 
    background-image:url(images/banner.png); 
    background-repeat:no-repeat; 
    background-size:cover; 
    background-position:center; 
    width:100%; 
}

Когда я применяю высоту до div заголовков будет отображено изображение, но оно принимает ту же высоту в мобильных устройствах, которые тоже Безразлично «Хорошо выглядеть. Как я могу реагировать так, чтобы фоновое изображение масштабировалось в соответствии с разрешением устройства.

источник

2015-05-15 Shareer

Возможный дубликат [Отзывчивые css фоновые изображения] (http://stackoverflow.com/questions/12609110/responsive-css-background-images) – Persijn

@Persijn Я попробовал решение, объясненное там, без установки высоты или ширины. но, к сожалению, он не работает – Shareer

Вы пытались работать с процентными значениями? Что-то вроде высоты 100% Или вы можете поэкспериментировать с атрибутом vh. но если вы хотите работать с ВМ, убедитесь, что вы используете JQuery тоже из браузера поддержки:

var viewHeight = $(window).height(); 
    $('.element').css('height', viewHeight);

источник

2015-05-15 10:18:36 moesphemie

Может это поможет вам, Demo

$(window).resize(function() { 
    var imgHeight = $(window).height(), 
     imgWidth = $(window).width(); 
    $('.headers').css({ 
     height: imgHeight, 
     width: imgWidth 
    }); 
});

источник

2015-05-15 10:35:15 stanze

Попробуйте применить отступы проценты вместо фиксированной высоты.

Так padding-bottom:50%; и изменение растительного покрова на background-size:100% auto;

дайте мне знать, как она идет, я думаю, что это, как я обходили его раньше.

источник

2015-05-15 10:39:47 DCdaz

Сделать фоновое изображение отзывчивым в CSS

ответ

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