Сделайте изображения адаптивными к мобильным устройствам с помощью HTML и CSS

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

#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, изображение выглядит не так, как мне хотелось бы.

Любая помощь приветствуется!

Вы изучали использование бутстрапа? Это делает это ОЧЕНЬ легко!

Jade Fisher 12.09.2018 17:52

Поскольку мы не знаем, как вы хотите, чтобы изображение отображалось, попробуйте объяснить желаемый результат и чем фактический результат отличается от него.

Turnip 12.09.2018 17:53

@JadeFisher "Просто используйте Bootstrap!" не настоящее решение.

Turnip 12.09.2018 17:53

@JadeFisher Я использую bootstrap, но это не исправляет изображения .. Только остальная часть страницы, хе-хе.

user10311677 12.09.2018 17:54

@Turnip Вот как я хочу, и так же это выглядит на экране ПК. (Я использую background-attachment: исправлено для прокрутки параллекса) Как я хочу: gyazo.com/ad9ebd2d3f21be5b78df97b969fea101 И вот как это выглядит на Iphone: gyazo.com/b1cce0ffe9e658d17463da42dc086d50

user10311677 12.09.2018 17:56

@LolPrezy Можете ли вы отредактировать эту ручку кода, чтобы показать проблему, с которой вы столкнулись? codepen.io/anon/pen/GXdEXE

LeonPierre 12.09.2018 17:56

По какой причине вы используете фоновое изображение? Если это должно быть фоновое изображение, то для высоты используйте трюк с обивкой для создания соотношения сторон - на данный момент высота auto, вероятно, будет означать, что у вашего div нет высоты, и поэтому он не будет отображаться

Pete 12.09.2018 18:00

Вы все можете попробовать это с annanbok.se

user10311677 12.09.2018 18:01

@Pete Ну, в основном я использую его, потому что это "фоновое" изображение. Я привел ссылку на страницу веб-сайта, чтобы вы могли ее увидеть / попробовать. Но я действительно не знаю, должно ли это быть фоновое изображение или нет. Дело в том, чтобы позволить фоновой установке делать свою работу. Но я думаю, вы можете использовать параллаксную прокрутку и с не фоновыми изображениями.

user10311677 12.09.2018 18:02

@LolPrezy код изображений не ошибочен, есть еще что-то, ограничивающее ширину вашей страницы до 411 пикселей.

LeonPierre 12.09.2018 18:13
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
10
894
1

Ответы 1

Если вы используете фоновое изображение, вы можете использовать padding-bottom, чтобы заставить элемент сохранять свое соотношение сторон при изменении размера.

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

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

Другие вопросы по теме