Фоновое изображение не масштабируется при меньшем размере экрана - PullRequest
Новая
       10

Фоновое изображение не масштабируется при меньшем размере экрана

0 голосов
/ 30 мая 2018

Я довольно новичок в этом интерфейсе.У меня есть изображение 1200 * 900 px, которое я использую в качестве фона для моего баннера.Изображение кажется хорошим на больших экранах, но когда я переключаюсь на Apple iPhone 6S из режима адаптивного дизайна.Фон обрезается с боков.Как сохранить полное изображение при меньших размерах.

index.html 

<div class="container-fluid banner">
       <div class="row">
            <div class="col-md-8 content">
               <h1>TThis is a banner image.</h1>
               <p>Banner image is the main image we use on our web pages showing what your page is all about.</p>
             </div><!--/.col-->
        </div>
</div>

style.css 

.banner {
    background: url(banner.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 680px;
    position: relative; 
}

Некоторые решения, которые я пытался сказать, установитьmax-width: 100% на экране меньшего размера с использованием медиазапросов 

@media (max-width: 768px) {
    .banner{ max-width: 100%; }
}

Но это решение не работает.Какие есть другие варианты масштабирования этого фона с размерами экрана?

1 Ответ

0 голосов
/ 30 мая 2018

Если вы хотите отобразить полное изображение, вы должны использовать contain вместо cover.

И если вы хотите оставить cover для больших экранов, вы можете изменить cover на contain только в ваших запросах. 

@media (max-width: 768px) { 
    -webkit-background-size: contain;
     -moz-background-size: contain;
     -o-background-size: contain;
     background-size: contain;

 }
...