Я знаю, что об этом есть несколько тем, но ни одна из них не работает для меня, и поэтому я прошу ВАШУ помощь. Хорошо. Я создаю веб-сайт и пытаюсь сделать свои изображения адаптивными, но не могу заставить его работать.
#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, изображение выглядит не так, как мне хотелось бы.
Любая помощь приветствуется!
Поскольку мы не знаем, как вы хотите, чтобы изображение отображалось, попробуйте объяснить желаемый результат и чем фактический результат отличается от него.
@JadeFisher "Просто используйте Bootstrap!" не настоящее решение.
@JadeFisher Я использую bootstrap, но это не исправляет изображения .. Только остальная часть страницы, хе-хе.
@Turnip Вот как я хочу, и так же это выглядит на экране ПК. (Я использую background-attachment: исправлено для прокрутки параллекса) Как я хочу: gyazo.com/ad9ebd2d3f21be5b78df97b969fea101 И вот как это выглядит на Iphone: gyazo.com/b1cce0ffe9e658d17463da42dc086d50
@LolPrezy Можете ли вы отредактировать эту ручку кода, чтобы показать проблему, с которой вы столкнулись? codepen.io/anon/pen/GXdEXE
По какой причине вы используете фоновое изображение? Если это должно быть фоновое изображение, то для высоты используйте трюк с обивкой для создания соотношения сторон - на данный момент высота auto, вероятно, будет означать, что у вашего div нет высоты, и поэтому он не будет отображаться
Вы все можете попробовать это с annanbok.se
@Pete Ну, в основном я использую его, потому что это "фоновое" изображение. Я привел ссылку на страницу веб-сайта, чтобы вы могли ее увидеть / попробовать. Но я действительно не знаю, должно ли это быть фоновое изображение или нет. Дело в том, чтобы позволить фоновой установке делать свою работу. Но я думаю, вы можете использовать параллаксную прокрутку и с не фоновыми изображениями.
@LolPrezy код изображений не ошибочен, есть еще что-то, ограничивающее ширину вашей страницы до 411 пикселей.
Если вы используете фоновое изображение, вы можете использовать padding-bottom
, чтобы заставить элемент сохранять свое соотношение сторон при изменении размера.
.image {
width: 100%;
padding-bottom: 50%;
background-image: url(path/to/img.jpg);
}
Вам нужно будет настроить padding-bottom для достижения желаемого соотношения сторон.
Вы изучали использование бутстрапа? Это делает это ОЧЕНЬ легко!