Блог

Главная - Вопросы по программированию - Я пытаюсь изменить размер своего фона с помощью медиа-запросов любые предложения

Я пытаюсь изменить размер своего фона с помощью медиа-запросов любые предложения

#html #css #responsive-design #media-queries #background-image

#HTML #css #адаптивный дизайн #медиа-запросы #фоновое изображение

Вопрос:

Я не могу понять, как изменить размер моего фонового изображения при использовании медиа-запроса. У кого-нибудь есть какие-либо предложения или ответы на это? Я пытался использовать медиа-запрос для своего фонового изображения так же, как я пробовал другие медиа-запросы, они обычно работают, но для фонового изображения, похоже, нет, или я делаю что-то не так. Проблема в том, что мое фоновое изображение не отображается полностью при использовании устройства меньшего размера, а я этого хочу. Любая помощь, которую я буду очень признателен, пожалуйста, и заранее благодарю вас.

     body{
        background-image:url("codeback.png");
        background-repeat: no-repeat;
        background-size: 1000px, 500px;
        background-attachment:fixed;
        
        
    }
    
    li{
        list-style-type:none;
        padding:0;
        margin:0;
        text-align:right;
        font-size:20px;
    }
    
    h1{
        text-align:center;
    }

    @media only screen and (min-width:1000px;)
    {
        body
        {background-size: cover;}
    }
   
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Evin McReynolds Portfolio</title>
  
  </head>

<body>
    <h1><strong>Hello welcome to Evin McReynolds portfolio</strong></h1>
    
<nav>
            <ul class="link">
                <li>Home</li></br>
                <li><a href="Aboutem.html">About Evin</a></li></br>
                <li><a href="contactem.html">Contact Evin</a></li></br>
                <li><a href="skillsem.html">Skills</a></li></br>
                <li><a href="EvinPro.html">Projects</a></li>
            </ul>
        </nav>
</body>

</html>

Ответ №1:

Вы должны использовать !important , чтобы заставить размер фона покрывать весь экран.

 body{
        background-image:url("https://i.pinimg.com/originals/03/4b/58/034b588b27ec7bc95cb7cb072da3fc60.png");
        background-repeat: no-repeat;
        background-size: 1000px, 500px;
        background-attachment:fixed;
        
        
    }
    
    li{
        list-style-type:none;
        padding:0;
        margin:0;
        text-align:right;
        font-size:20px;
    }
    
    h1{
        text-align:center;
    }

    @media only screen and (min-width: 1000px)
    {
        body{
        background-size: cover !important;
        }
    } 
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Evin McReynolds Portfolio</title>
  
  </head>

<body>
    <h1><strong>Hello welcome to Evin McReynolds portfolio</strong></h1>
    
<nav>
            <ul class="link">
                <li>Home</li></br>
                <li><a href="Aboutem.html">About Evin</a></li></br>
                <li><a href="contactem.html">Contact Evin</a></li></br>
                <li><a href="skillsem.html">Skills</a></li></br>
                <li><a href="EvinPro.html">Projects</a></li>
            </ul>
        </nav>
</body>

</html>

Комментарии:

1. применяется ли !important по-прежнему при использовании пикселей? например: @экран только для мультимедиа и (минимальная ширина: 1000 пикселей) { тело{ размер фона: 500 пикселей!важно; } }

2. @Emc !important может применяться к любому атрибуту css 🙂

Ответ №2:

Это может сильно зависеть от того, как вы размещаете изображение на странице. Вы можете сделать это с помощью html-тега img или поместить его в любой тег div, а затем использовать CSS для отображения его в качестве фонового изображения. Я нахожу, что оба метода могут реагировать по-разному, а не так, как вы ожидаете, пытаясь создать стиль.

У вас может быть серия изображений, которые имеют статический размер, и путь к файлу изменяется по мере изменения размеров носителя

Или .. иметь только 1 отзывчивое изображение, где оно просто уменьшается в размерах. Вы можете получить интересную супер-выборку с помощью алгоритма изменения размера, который может выглядеть очень красиво.

 #supersampleimgDiv {
  width: 100%;
  height: auto;
  background-image: url(1650x3000px_responsiveImage.png);
}

#responsive_wCtrl_ImgDiv {
  width: auto;
  max-height: 63%;
  min-height: 20%;
  background-image: url(responsiveImage.png);
}

Я не уверен, насколько идеален этот метод на самом деле, для телефона не имеет
особого смысла загружать такой большой файл через мобильные
данные, когда это может быть просто изображение меньшего размера, отображаемое в
медиа-запросе.

Я не говорю, что не используйте отзывчивое изображение, но полезно понять, в чем его недостатки. Что приятно, вы могли бы делать такие вещи, как max-width: 500px или 63%; чтобы контролировать, как он отображается. Размер высоты автоматически вычисляется для поддержания соотношения сторон изображения.

 #imgDiv{
  height: auto;
  width: 2000px;
  background-image: url(2000long_staticBg.png);
}

@media screen and (max-width: 1220px) {
  #imgDiv{
    height: auto;
    width: 1220px;
    background-image: url(1220long_staticBg.png);
  }
}


@media screen and (max-width: 440px) {
   #imgDiv{
    height: auto;
    width: 440px;
    background-image: url(440long_staticBg.png);
  }
}

вы можете получить контроль над изображением и его отображением, если сможете определить 1 измерение (длину или ширину) как статическое, а другое — как автоматическое. Также используйте минимальную и максимальную ширину и высоту, чтобы получить контроль, когда сайт проходит через медиа-запросы.

Метки: