Использование медиа-запроса для изображения не работает правильно - PullRequest
Новая
       4

Использование медиа-запроса для изображения не работает правильно

0 голосов
/ 07 ноября 2019

В моем проекте я установил фон для изображения, которое выбрал.

Код для этого здесь: 

<body>
    <img class="backgroundimg" src="{% static 'spotifywallpaper.jpg' %}" style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
</body>

Затем я использую медиазапрос в css. Я новичок в этих запросах и разработке в целом, поэтому, пожалуйста, скажите мне, если я делаю что-то не так или неэффективно.

Мой запрос в основном говорит, что если ширина страницы составляет 700px или меньше, установитеширина изображения до 100%. При тестировании этого изображения мое изображение не переходит на страницу, а растягивается внутрь, вызывая ужасное воздействие на изображение.

Вот мой код медиа-запроса: 

@media screen and (max-width: 700px) {
    .backgroundimg {
        width: 100%;
    }
}

Кто-нибудь знает, почемуэто не работает? Спасибо.

ОБНОВЛЕНО:

CSS 

.mydiv {
  background-image: url('https://wallpaperaccess.com/full/667865.jpg');
  width: 100%;
  height: 100%;
  object-fit:cover;
}

HTML 

<div class="mydiv">
    Placeholder
</div>

Этот код не соответствуетработать правильно. Я работаю точно так же, как и с тегом изображения, на этот раз с div.

ОБНОВЛЕНИЕ 2: Этот код не устанавливает ширину и высоту изображения на 100% страницы, как и ожидалось.

HTML 

<img class="bgimage"src="{% static 'spotifywallpaper.jpg' %}" alt="">

CSS 

.bgimage {
    width: 100%;
    height: 100%;
    object-fit:cover;
}

Ответы [ 2 ]

1 голос
/ 07 ноября 2019

, если вы хотите, чтобы изображение не было уродливым при растягивании его на 100% ширины

, вы можете использовать object-fit свойство

например: 

img{
    width: //blabla
    height: //blabla
    object-fit:cover;
}

Также, если вы используете медиа-запрос для изменения ширины при смене экрана, у вас не должно быть ширины и высоты, определенных во встроенном стиле, и я полагаю, вы знаете, что такое встроенный стиль: d <3 </p>

Обновление: Обратите внимание, что свойство object-fit предназначено для тега img, но если вы собираетесь использовать заданный фон с помощью тега <img>, это плохая практика, вы должны использовать <div> вместо свойства background-image:url('/images/someimage.png'), потому что у div гораздо более эффективные способыманипулирования фоновыми изображениями. Проверьте этот слева на указанной ссылке, есть список background properties

  .mydiv {
              background-image: url('https://wallpaperaccess.com/full/667865.jpg');
              width: 100%;
              height: 100%;
              background-size:cover;
            } 

<div class="mydiv">
    Placeholder
</div>

, чтобы узнать больше о background-size проверке свойств этой ссылке

0 голосов
/ 07 ноября 2019

Во-первых, вы дали ему встроенный код, встроенный код сильнее внешнего кода, поэтому ваш код медиа-запроса не будет работать, например, 

<div id="test" style="width: 100%; height: 100px; background-color: red;"></div>

А в файле CSS вы дали 

@media screen and (max-width:700px){
  #test {
    background-color: black;
  }
}

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

#test {
  width: 100%; 
  height: 100px; 
  background-color: red;
}
@media screen and (max-width:700px){
  #test {
    background-color: black;
  }
}
...