CSS-фонове зображення відповідно до ширини, висоти повинно автоматично масштабуватися пропорційно

Я маю

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

Бажаний ефект полягає в тому, що це фонове зображення матиме ширину, рівну ширині сторінки, висота змінюється для підтримки пропорції. Наприклад, якщо вихідне зображення має розмір 100 * 200 (будь-які одиниці), а тіло шириною 600 пікселів, фонове зображення повинно бути високим 1200 пікселів. Висота повинна змінюватися автоматично, якщо змінити розмір вікна. Чи можливо це?

На даний момент Firefox виглядає так, що робить висоту підходящою, а потім регулює ширину. Це, можливо, тому, що висота - це найдовший розмір, і він намагається уникати обрізання? Я хочу обрізати вертикально, потім прокручувати: немає горизонтального повтору.

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

Для цього є властивість 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

Вибачте за погану каламбур, але я буду використовувати картину дня Бісварупа Гангулі для демонстрації. Скажімо, що це ваш екран, а сіра область знаходиться поза вашим видимим екраном. Для демонстрації я прийму співвідношення 16х9.

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

contain

contain

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

Це гарантує, що фонове зображення завжди повністю міститься у зоні позиціонування фону, однак background-colorу цьому випадку може бути заповнено порожній простір :

cover

cover

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

Це гарантує, що фонове зображення охоплює все. Він не буде видимим background-color, проте залежно від співвідношення екрана значна частина вашого зображення може бути відрізана:

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

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's 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>

На основі порад 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;
}

Я не впевнений, що саме ви шукаєте, але вам справді варто ознайомитися з цими чудовими повідомленнями в блозі, написаними Крісом Койєром з CSS-Tricks:

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

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

Прочитайте описи кожної із статей і подивіться, чи є вони тим, що ви шукаєте.

Перший відповідає на таке питання:

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

Мета другого допису - отримати наступне, "фонове зображення на веб-сайті, яке охоплює все вікно браузера в усі часи".

Сподіваюсь, це допомагає.

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

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

%; фоновий розмір: 100% 100%; "

Спробуйте це,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

Просто додайте цей один рядок:

    .your-class {
        height: 100vh;
    }

vh - висота вікна перегляду. Це автоматично збільшуватиме масштаб, щоб відповідати вікну браузера пристрою.

Перевірте більше тут: Зробіть Div на 100% висотою вікна браузера

body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}

У мене була та сама проблема, не в змозі змінити розмір зображення під час коригування розмірів браузера.

Поганий код:

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: auto 100%;

Налаштування розміру фону не допомагає, для мене спрацювало наступне рішення:

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

Він в основному обробляє зображення і робить його придатним, background-size: contain/coverвсе ще не робить його підходящим.