У меня есть веб-сайт (g-floors.eu), и я хочу, чтобы фон (в css я определил bg-изображение для контента) также был адаптивным. К сожалению, я действительно не имею ни малейшего представления о том, как это сделать, кроме одной вещи, о которой я могу думать, но это довольно обходной путь. Создание нескольких изображений и затем использование размера экрана CSS для изменения изображений, но я хочу знать, есть ли более практичный способ для достижения этого.
По сути, я хочу добиться того, чтобы изображение (с водяным знаком «G») автоматически изменяло размеры, не отображая меньше изображения. Если возможно конечно
ссылка: g-floors.eu
Код у меня пока (содержательная часть)
#content {
background-image: url('../images/bg.png');
background-repeat: no-repeat;
position: relative;
width: 85%;
height: 610px;
margin-left: auto;
margin-right: auto;
}
Ответы:
Если вы хотите, чтобы одно и то же изображение масштабировалось в зависимости от размера окна браузера:
Не устанавливайте ширину, высоту или поля.
РЕДАКТИРОВАТЬ: Предыдущая строка о не задании ширины, высоты или поля относится к первоначальному вопросу OP о масштабировании с размером окна. В других случаях вы можете при желании установить ширину / высоту / поля.
источник
div
получают собственную высоту из своего содержимого или занимают свободное место в модели flexbox. Сказать, что без явной ширины / высоты контейнер вообще не будет отображаться, неверно. Очевидно, что если вы хотите отобразить пустой div с фоновым изображением, вам нужно будет установить высоту и, возможно, ширину, но тогда вы увидите только часть изображения, если соотношение сторон не будет таким же, как у само изображение.с помощью этого кода ваше фоновое изображение становится центральным и фиксирует его размер независимо от того, что вы изменили размер div, хорошо для маленьких, больших, нормальных размеров, лучше всего для всех, я использую его для своих проектов, где мой размер фона или размер div может измениться
источник
Попробуй это :
источник
CSS:
Это должно делать свое дело! :)
источник
Вот sass mixin для адаптивного фонового изображения, которое я использую. Это работает для любого
block
элемента. Конечно, то же самое может работать в простом CSS, который вам нужно будет рассчитатьpadding
вручную.Пример http://jsfiddle.net/XbEdW/1/
источник
Это легко =)
Взгляните на демоверсию jsFiddle
источник
Вот лучший способ, который я получил.
Проверьте на w3schools
Больше доступных вариантов
источник
я использовал
который работал очень хорошо.
источник
источник
Адаптивный веб-сайт, добавив отступ в нижнюю часть изображения высота / ширина x 100 = отступ-нижний%:
http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
Более сложный метод:
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
Попробуйте изменить размер фона, например Firefox Ctrl + M, чтобы увидеть волшебный красивый скрипт, который я считаю лучшим:
http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content
источник
Вы можете использовать это. Я проверил и работает на 100% правильно:
Вы можете проверить свой веб-сайт с отзывчивостью в этом симуляторе размера экрана: http://www.infobyip.com/testwebsiteresolution.php
Очистите кэш каждый раз, когда вы вносите изменения, и я бы предпочел использовать Firefox для его проверки.
Если вы хотите использовать изображение из другого сайта / URL, а не как:
background-image:url('../images/bg.png');
// Эта структура должна использовать изображение с вашего собственного размещенного сервера. Тогда используйте как это:background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;
Наслаждаться :)
источник
Если вы хотите, чтобы все изображение отображалось независимо от соотношения сторон, попробуйте следующее:
Это покажет все изображение независимо от размера экрана.
источник
источник
Всего две строки кода, все работает.
источник
Адаптивный для квадратного соотношения с JQuery
источник
или
источник
Я думаю, лучший способ сделать это так:
Таким образом, не нужно больше ничего делать, и все довольно просто.
По крайней мере, у меня это работает.
Я надеюсь, что это помогает.
источник
Попробуйте использовать,
background-size
но используя два аргумента: один для ширины, а другой для высоты.источник
свойство position можно использовать для выравнивания верхнего дна и центра в соответствии с вашими потребностями, а размер фона можно использовать для обрезки по центру (обложка) или полного изображения (содержит или 100%)
источник