Фонове зображення на 100% із шириною "автоматично"

Зараз я працюю над мобільною цільовою сторінкою компанії. Це справді базовий макет, але під заголовком є ​​зображення товару, яке завжди матиме 100% ширини (дизайн показує, що воно завжди йде від краю до краю). Залежно від ширини екрану висота зображення, очевидно, буде відповідно регулюватися. Спочатку я зробив це з img (із шириною CSS 100%), і це спрацювало чудово, але я зрозумів, що хотів би використовувати медіа-запити для подання різних зображень на основі різних роздільних здатностей - скажімо, малого, середнього та велика версія того самого зображення, наприклад. Я знаю, що ви не можете змінити img src за допомогою CSS, тому я вирішив, що повинен використовувати фон CSS для зображення, на відміну від тегу img у HTML.

Я не можу зрозуміти, що це працює належним чином, оскільки div з фоновим зображенням потребує як ширини, так і висоти, щоб показати фон. Я, очевидно, можу використовувати 'width: 100%', але що я використовую для висоти? Я можу поставити випадкову фіксовану висоту, таку як 150px, і тоді я бачу верхні 150px зображення, але це не рішення, оскільки немає фіксованої висоти. Я зіграв і виявив, що коли є висота (протестована із 150px), я можу використовувати 'background-size: 100%', щоб правильно розмістити зображення в div. Я можу використовувати найновіший CSS3 для цього проекту, оскільки він орієнтований виключно на мобільні пристрої.

Нижче я додав приблизний приклад. Будь ласка, вибачте за вбудованими стилями, але я хотів би навести базовий приклад, щоб спробувати зробити своє питання трохи зрозумілішим.

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

Мені, можливо, доводиться давати контейнеру div відсоток висоти на основі цілої сторінки, чи я дивлюсь на це абсолютно неправильно?

Крім того, чи вважаєте ви, що фони CSS - найкращий спосіб це зробити? Можливо, існує техніка, яка обслуговує різні теги img залежно від ширини пристрою / екрану. Загальна ідея полягає в тому, що шаблон цільової сторінки буде використовуватися неодноразово з різними зображеннями товару, тому мені потрібно переконатись, що я розроблю це найкращий можливий спосіб.

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

Замість того, щоб використовувати, background-imageви можете використовувати imgбезпосередньо, і щоб зображення розповсюдилося на всю ширину області перегляду, спробуйте використовувати, max-width:100%;і пам'ятайте, не застосовуйте ніяких відступів або полів до основного div контейнера, оскільки вони збільшать загальну ширину контейнера. Використовуючи це правило, ви можете мати ширину зображення, рівну ширині браузера, і висота також буде змінюватися відповідно до співвідношення сторін. Дякую.

Редагувати: зміна зображення за різним розміром вікна

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){			
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
  }
  else if(windowWidth > 400){
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
  <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

Таким чином ви змінюєте своє зображення в різному розмірі браузера.

Тім С. був набагато ближче до "правильної" відповіді, ніж прийнята в даний час. Якщо ви хочете мати 100% ширину, фонове зображення зі змінною висотою, зроблене за допомогою CSS, замість того, щоб використовувати cover(що дозволить зображенню розширюватися з боків) або contain(що взагалі не дозволяє розширювати зображення), просто встановіть CSS так:

body {
    background-image: url(img.jpg);
    background-position: center top;
    background-size: 100% auto;
}

Це встановить для фонового зображення 100% ширини і дозволить висоті перелитися. Тепер ви можете використовувати медіа-запити для заміни цього зображення замість того, щоб покладатися на JavaScript.

EDIT: Я щойно зрозумів (через 3 місяці), що ви, мабуть, не хочете, щоб зображення переповнювалось; ви, схоже, хочете, щоб елемент контейнера змінював розмір на основі його фонового зображення (щоб зберегти його співвідношення сторін), що, наскільки мені відомо, неможливе для CSS.

Сподіваємось, незабаром ви зможете використовувати новий атрибут srcset для imgелемента. Якщо ви хочете використовувати imgелементи зараз, то, мабуть, найкраща відповідь.

Однак ви можете створити адаптивний елемент фонового зображення з постійним співвідношенням сторін, використовуючи суто CSS. Для цього ви встановлюєте значення height0 і встановлюєте padding-bottomвідсоток від власної ширини елемента, наприклад:

.foo {
    height: 0;
    padding: 0; /* remove any pre-existing padding, just in case */
    padding-bottom: 75%; /* for a 4:3 aspect ratio */
    background-image: url(foo.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

Для того, щоб використовувати різні пропорції, розділіть висоту вихідного зображення на власну ширину та помножте на 100, щоб отримати відсоткове значення. Це працює, оскільки відсоток заповнення завжди обчислюється на основі ширини, навіть якщо це вертикальна прокладка.

Спробуйте це

html { 
  background: url(image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

Спрощена версія

html {
  background: url(image.jpg) center center / cover no-repeat fixed;
}

Ви можете використовувати властивість CSS background-sizeі встановити для нього значення coverабо contain, залежно від ваших уподобань. Обкладинка повністю закриє вікно, тоді як вміст змусить одну сторону припасувати до вікна, таким чином не охоплюючи всю сторінку (якщо формат екрана не дорівнює зображенню).

Зверніть увагу, що це властивість CSS3. У старих браузерах ця властивість ігнорується. Крім того, ви можете використовувати javascript для зміни параметрів CSS залежно від розміру вікна, але це не є кращим.

body {
    background-image: url(image.jpg); /* image */
    background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
}

Просто використовуйте двоколірне фонове зображення:

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>

Додайте css:

   html,body{
        height:100%;
        }
    .bg-img {
        background: url(image.jpg) no-repeat center top; 
        background-size: cover; 
        height:100%;     
    }

А html це:

<div class="bg-mg"></div>

CSS: розтягування фонового зображення на 100% ширини та висоти екрану?

Зараз 2017 рік, і тепер ви можете використовувати об’єкт-пристосування, який має гідну підтримку . Він працює так само, як div, background-sizeале над самим елементом та будь-яким елементом, включаючи зображення.

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}