CSS background image, чтобы соответствовать ширине, высота должна автоматически масштабироваться пропорционально

У меня

body {
    background: url(images/background.svg);
}

Желаемый эффект заключается в том, что это фоновое изображение будет иметь ширину, равную ширине страницы, изменение высоты для поддержания пропорции. например если исходное изображение составляет 100 * 200 (любые единицы), а тело имеет ширину 600 пикселей, фоновое изображение должно составлять 1200 пикселей в высоту. При изменении размера окна высота автоматически изменяется. Возможно ли это?

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

Кроме того, Chrome помещает изображение в центр, не повторяется, даже когда background-repeat:repeat указывается явно, что по умолчанию равно.

+224
13 февр. '12 в 15:14
источник поделиться
8 ответов

Для этого есть свойство CSS3, а именно background-size (проверка совместимости). Хотя можно задать значения длины, обычно используется со специальными значениями contain и cover. В вашем конкретном случае вы должны использовать cover:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

Яйца для contain и cover

Извините за плохой каламбур, но я собираюсь использовать картинку дня Biswarup Ganguly для демонстрации. Допустим, что это ваш экран, а серая область находится за пределами видимого экрана. Для демонстрации я собираюсь принять соотношение 16x9.

screen

Мы хотим использовать вышеупомянутую картину дня в качестве фона. Однако по какой-то причине мы обрезали изображение до 4x3. Мы могли бы установить свойство background-size на фиксированную длину, но мы сосредоточимся на contain и cover. Обратите внимание, что я также предполагаю, что мы не изменяли ширину и/или высоту body.

contain

contain

Масштабируйте изображение, сохраняя его внутреннее соотношение сторон (если оно есть), до самого большого размера, чтобы его ширина и высота могли поместиться внутри области позиционирования фона.

Это гарантирует, что фоновое изображение всегда полностью содержится в области фонового позиционирования, однако в этом случае может быть пустое пространство, заполненное вашим background-color:

contain

cover

cover

Масштабируйте изображение, сохраняя при этом его внутреннее соотношение сторон (если оно есть) до наименьшего размера, так что его ширина и высота могут полностью перекрывать область фонового позиционирования.

Это гарантирует, что фоновое изображение покрывает все. Не будет видимого background-color, но в зависимости от соотношения экрана большая часть вашего изображения может быть отключена:

cover

Демонстрация с фактическим кодом

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}
<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>
+563
13 февр. '12 в 17:29
источник

Основываясь на советах https://developer.mozilla.org/en-US/docs/CSS/background-size, я получаю следующий рецепт, который работал у меня

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}
+24
15 янв. '13 в 22:40
источник
другие ответы

Связанные вопросы


Похожие вопросы

Я не уверен, что вы ищете точно, но вы действительно должны проверить эти превосходные записи в блоге, написанные Крисом Койером из CSS-Tricks:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

Прочитайте описания каждой статьи и посмотрите, что они ищут.

Первый ответит на следующий вопрос:

Есть ли способ изменить размер фонового изображения? Как и в, заполните фон веб-страницы от края до края с помощью изображения, независимо от размера окна браузера. Кроме того, при изменении окна браузера размер изменяется больше или меньше. Кроме того, убедитесь, что он сохраняет свое соотношение (не растягивается странно). Кроме того, не вызывает полосу прокрутки, просто отключается вертикально, если нужно. Кроме того, он появляется на странице как встроенный тег.

Вторая задача состоит в том, чтобы получить следующее "фоновое изображение на веб-сайте, которое все время охватывает все окно браузера".

Надеюсь, что это поможет.

+9
13 февр. '12 в 16:49
источник

Просто добавьте эту строку:

    .your-class {
        height: 100vh;
    }

vh - высота окна просмотра. Это автоматически масштабируется, чтобы соответствовать окну браузера устройства.

Подробнее здесь: Сделать div на 100% высотой окна браузера

+3
27 мар. '17 в 12:51
источник

Попробуйте это,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
+2
29 июл. '15 в 5:57
источник

У меня была такая же проблема, не удалось изменить размер изображения при настройке размеров браузера.

Плохой код:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}


Хороший код:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

Ключевым здесь является добавление этого элемента → background-size: содержать;

0
15 янв. '14 в 19:21
источник

Фоновое изображение не установлено Perfect, поэтому его css создает проблему, поэтому его css файл изменяется ниже кода

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

%; background-size: 100% 100%; "

0
26 мая '17 в 7:14
источник

Вот что сработало для меня:

background-size: auto 100%;
0
16 авг. '17 в 15:38
источник

Посмотрите другие вопросы по меткам или Задайте вопрос