я имею
body {
background: url(images/background.svg);
}
Желаемый эффект состоит в том, что это фоновое изображение будет иметь ширину, равную ширине страницы, высота будет изменяться для сохранения пропорции. Например, если исходное изображение имеет размер 100 * 200 (любые единицы), а тело имеет ширину 600 пикселей, фоновое изображение должно иметь высоту 1200 пикселей. Высота должна изменяться автоматически, если размер окна изменяется. Это возможно?
На данный момент Firefox выглядит так, как будто он подбирает высоту, а затем корректирует ширину. Возможно, это потому, что высота - самое длинное измерение, и оно пытается избежать обрезки? Я хочу обрезать по вертикали, а затем прокрутить: без горизонтального повтора.
Кроме того, Chrome помещает изображение в центр, без повтора, даже если background-repeat:repeat
оно указано явно, что в любом случае является значением по умолчанию.
html, body { height: 100%; }
? Кроме того, кашель .Ответы:
Для этого есть свойство CSS3, а именно
background-size
( проверка совместимости ). Хотя можно установить значения длины, обычно это используется со специальными значениямиcontain
иcover
. В вашем конкретном случае вы должны использоватьcover
:Баклажан для
contain
иcover
Извините за плохой каламбур, но я собираюсь использовать снимок дня Бисварупа Гангули для демонстрации. Допустим, это ваш экран, а серая область находится за пределами видимого экрана. Для демонстрации я собираюсь принять соотношение 16x9.
Мы хотим использовать вышеупомянутую картину дня в качестве фона. Однако по какой-то причине мы обрезали изображение до 4х3. Мы могли бы установить для
background-size
свойства некоторую фиксированную длину, но мы сосредоточимся наcontain
иcover
. Обратите внимание, что я также предполагаю, что мы не искали ширину и / или высотуbody
.contain
Это гарантирует, что фоновое изображение всегда полностью содержится в области расположения фона, однако
background-color
в этом случае может быть некоторое пустое пространство, заполненное вашим :cover
Это гарантирует, что фоновое изображение покрывает все. Там не будет никакого видимого
background-color
, однако в зависимости от соотношения экрана большая часть вашего изображения может быть обрезана:Демонстрация с актуальным кодом
источник
-webkit-
префикс?background-size: contain
contain
это как увеличение зума.cover
это как увеличение масштаба.contain
регулирует размер изображения в соответствии с большим размером по ширине и высоте.cover
регулирует размер изображения в соответствии с меньшим размером по ширине и высоте.Основываясь на советах от https://developer.mozilla.org/en-US/docs/CSS/background-size, я получаю следующий рецепт, который работал для меня
источник
background-position: center;
, это работало лучше для меня, чемbackgound-size: cover;
.overflow-y: hidden
часть?Я не уверен, что именно вы ищете, но вы действительно должны проверить эти отличные посты в блоге, написанные Крисом Койером из CSS-Tricks:
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
Прочитайте описания для каждой из статей и посмотрите, являются ли они тем, что вы ищете.
Первый отвечает на следующий вопрос:
Цель второго поста - получить следующее: «фоновое изображение на веб-сайте, которое постоянно покрывает все окно браузера».
Надеюсь это поможет.
источник
Фоновое изображение не установлено идеально, тогда его CSS является проблемой создания, поэтому его файл CSS изменится на приведенный ниже код
%; размер фона: 100% 100%; "
источник
Попробуй это,
источник
Просто добавьте эту строку:
vh - высота окна просмотра. Это автоматически масштабируется, чтобы соответствовать окну браузера устройства.
Проверьте больше здесь: Сделайте div 100% высоты окна браузера
источник
источник
У меня возникла та же проблема: не удалось изменить размер изображения при настройке размеров браузера.
Неверный код:
Хороший код:
Ключевым моментом здесь является добавление этого элемента -> background-size: contains;
источник
Вот что сработало для меня:
источник
Установка размера фона не помогает, у меня сработало следующее решение:
Это в основном обрезает изображение и делает его вписывающимся,
background-size: contain/cover
все еще не делая его подходящим.источник