Возникли проблемы с CSS на мобильных устройствах, отображающих фоновое изображение в портретном формате
Я относительно новичок в программировании и пытаюсь получить фоновое изображение для отображения на мобильном телефоне. Кажется, это нормально работает с мобильным пейзажем, но не с мобильным портретом. Он отображает около 1/3 изображения в портретной ориентации. Я пробовал height: 100% width: 100%, background-position: center, background-size: cover. Я также попытался создать другое изображение шириной 290 пикселей, а затем использовать медиа-запросы для вызова этого изображения. Ни то, ни другое не помогло. Любая помощь в решении этой проблемы будет принята с благодарностью?
По сути, это целевая страница, и никаких проблем! Мне нужно многому научиться! www.patonplacetestsite3.ca
Ответы 2
Каково предполагаемое поведение?
background-size: contain;
Scales the image as large as possible without cropping or stretching the image.
background-size: cover;
Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.
(из https://developer.mozilla.org/en-US/docs/Web/CSS/background-size)
Если вы хотите показать все изображение без обрезки, вам нужно использовать background-size: contain;. В этом случае изображение больше не будет заполнять весь фон в портретном режиме, и вы, вероятно, также захотите добавить background-repeat: no-repeat;.
Спасибо! Это немного лучше, мне, очевидно, пришлось бы настроить CSS на таймере. Обратной стороной, конечно же, является то, что фон не закрывает весь фон рабочего стола.
Вот вам еще одно предложение.
То, что вы пытаетесь сделать, непросто, потому что вы хотите, чтобы ваш дизайн работал со всеми окнами просмотра или экранами, и в то же время у вас есть некоторая текстовая информация, которая всегда должна быть видна.
Вот вам одно предложение:
https://codepen.io/panchroma/pen/Lmjwyv
Важные моменты:
(1) Вы хотите добавить метатег области просмотра в заголовок документа, это не позволит смартфонам масштабировать контент по размеру экрана.
<head>
...
<meta name = "viewport" content = "width=device-width, initial-scale=1">
...
</head>
Подробнее о метатегах области просмотра здесь
(2) Измените расположение фонового изображения на левый нижний, тогда критический текст останется в поле зрения в разных окнах просмотра.
background-image: url(images/ComingSoon.jpg);
...
background-position:left bottom;
...
}
(3) На основе того, что вы начали, создайте второе фоновое изображение в портретном формате для мобильных устройств, а затем используйте медиа-запрос, чтобы показать его под любым окном просмотра, которое лучше всего подходит для вашего дизайна.
@media screen and (max-width: 600px) {
/* Small screen, non-retina */
.bgimg {
background-image: url(images/ComingSoon_Small_Portrait.jpg);
background-size: contain;
}
}
Вот пример того, о чем я думаю
Размер фона не обязательно должен быть «содержать», я просто показываю, что он может отличаться от настройки для рабочего стола.
Удачи!
Спасибо, это интересный способ сделать это. Только один вопрос, какие размеры вы бы порекомендовали для маленького экрана? прямо сейчас у меня есть один набор размером 290px X 163px.
Я бы начал с просмотра вашего рабочего стола, а затем уменьшил ширину окна, пока вам не понравилось, как фоновое изображение помещается на странице. Для аргументации предположим, что это 600 пикселей в ширину. Предполагая, что типичное соотношение сторон экрана смартфона примерно 1 в ширину x 2 в высоту, вы можете создать фоновое изображение в портретном формате шириной 600 пикселей и высотой 1200 пикселей, а медиа-запрос будет таким же, как в моем примере ... (макс. -ширина: 600 пикселей). Ничто не мешает вам использовать фоновые изображения для смартфонов, планшетов и настольных компьютеров, если вы этого захотите. Основывайте все на своем фоновом дизайне.
У меня в основном настольная версия в порядке и альбомная на мобильном телефоне, но с портретной версией на мобильном телефоне все еще есть проблемы. Если у кого-то есть дополнительные комментарии, я был бы признателен!
Рассматривали ли вы вариант размещения текста над или под изображением в мобильной портретной версии?
Я переместил текст «т.е. таймер» над изображением. Скоро выйдет танец Omnia Dance. По-прежнему есть проблема с изображением в портретной ориентации на мобильном устройстве. search.google.com/test/…
См. Мою правку в (3) выше, чтобы увидеть пример того, о чем я думал.
Теперь я понимаю, что вы имеете в виду. Измените само изображение, т.е. текст над изображением, чтобы оно лучше вписывалось в портретную ориентацию. Вот что я пытаюсь сделать, это изменить дизайн изображения, чтобы изображение лучше подходило к портретному формату. Если вы это имеете в виду, я дам вам знать, как я разбираюсь. Еще раз спасибо!
Да именно так!
Единственная проблема, которая у меня есть, - это та, которую я использую сейчас, так как маленькое изображение имеет размер 290px X 163px. Я ценю, что он не уместится на весь экран, но он должен соответствовать ширине в портретной ориентации, верно? Но это совсем не подходит. Я все равно продолжу свой комментарий выше, но если вы можете дать мне какой-то вклад по этой части, я буду признателен.
Да, 290 x 163 маловат. Есть ли причина, по которой вы не можете сделать более крупную версию, по крайней мере, 450 пикселей в ширину и 750 пикселей в высоту?
Нет, нет причин. Я хочу сказать, что теперь он должен соответствовать ширине и даже не близко. Я сделаю это, но из того, что я прочитал, они говорят, что идеальная ширина - 340 пикселей X независимо. Можете ли вы сказать мне, почему изображение сейчас не умещается по ширине? Вы можете увидеть здесь: search.google.com/test/…
В строке 54 или в вашем CSS увеличьте max-width как минимум до 414 пикселей, я считаю, что это ширина iPhone 7/8 s.
Ваше право на деньги! Спасибо! Теперь я посмотрю, как примерно переделать изображение до размера 340 х 700 пикселей. Действительно ценю вашу помощь !!
Снова вернулся! Так что мне потребовалось немного переделать изображение. Сейчас он обычно работает на портретном мобильном телефоне, но не полностью подходит для моей Galaxy 7. Вы бы предложили что-нибудь в CSS или просто измените ширину изображения. В настоящее время размер 340 х 688 пикселей. Благодарю за любые комментарии по решению моей последней проблемы. Посмотреть здесь: search.google.com/test/…
Игнорировать мой последний комментарий недостаточно обновил. Перемещен в надлежащее место и отлично выглядит на www.omniadance.ca Еще раз спасибо!
Приятно слышать @PatonPlace
Предоставьте нам рабочий пример проблемы, чтобы мы могли увидеть код и помочь вам решить проблему.