Сделайте изображения мобильными в HTML и CSS - PullRequest
Новая
       4

Сделайте изображения мобильными в HTML и CSS

0 голосов
/ 12 сентября 2018

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

#banner2 {
background-image: url(Images/banner2.jpeg);
background-attachment: fixed;
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-width: 100%;
height: 500px;
max-height: 50%; 
}

@media screen and (max-width: 800px) {
    #banner2 {
        background-image: url(Images/banner2.jpeg);
        width: 100%;
        height: auto;
    }
}

Это мой CSS-код, и я пробовал много способов, но я не могу заставить его работать на моем Iphone.

Я также добавил эту строку кода в HTML.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Но все еще нет ..

Поэтому, когда я пытаюсь открыть веб-страницу на моем iPhone, изображение выглядит не так, как хотелось бы.

Любая помощь будет высоко ценится!

1 Ответ

0 голосов
/ 12 сентября 2018

Если вы используете background-image, вы можете использовать padding-bottom, чтобы заставить элемент поддерживать его пропорции при изменении размера. 

.image {
  width: 100%;
  padding-bottom: 50%;
  background-image: url(path/to/img.jpg);
}

Вам нужно настроить padding-bottom, чтобы достичьжелаемое соотношение сторон.

...