Як домогтися висоти div для автоматичного налаштування під розмір фону?

Як я можу отримати div, щоб він автоматично підлаштовувався під розмір фону, який я встановив для нього, не встановлюючи для нього певної висоти (або мінімальної висоти)?

Іншим, можливо, неефективним рішенням буде включення зображення під imgелемент, встановлений на visibility: hidden;. Потім зробіть background-imageнавколишній дів таким же, як і зображення.

Це встановить навколишній діва розмір зображення в imgелементі, але відобразить його як фон.

<div style="background-image: url(http://your-image.jpg);">
 <img src="http://your-image.jpg" style="visibility: hidden;" />
</div>

Існує дуже приємний і класний спосіб зробити так, щоб фонове зображення працювало як imgелемент, щоб воно heightавтоматично регулювало його . Потрібно знати зображення widthта heightспіввідношення. Встановіть heightконтейнер на 0 і встановіть padding-topвідсоток на основі співвідношення зображень.

Це буде виглядати наступним чином:

div {
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding-top: 66.64%; /* (img-height / img-width * container-width) */
                /* (853 / 1280 * 100) */
}

Ви щойно отримали фонове зображення з автоматичною висотою, яке буде працювати так само, як елемент img. Ось робочий прототип (ви можете змінити розмір і перевірити висоту Div): http://jsfiddle.net/TPEFn/2/

Немає можливості автоматично налаштувати розмір фонового зображення за допомогою CSS.

Ви можете зламати навколо нього, вимірявши фонове зображення на сервері, а потім застосувавши ці атрибути до div, як уже згадували інші.

Ви також можете зламати трохи javascript, щоб змінити розмір div залежно від розміру зображення (після завантаження зображення) - це в основному те саме.

Якщо вам потрібен ваш div для автоматичного встановлення зображення, я можу запитати, чому ви просто не помістите <img>тег у свій div?

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

.wrapper {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
  background-size: contain;
  background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
  margin: 0 auto;
}
.wrapper:after {
  padding-top: 75%;
  /* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  color: black;
  text-align: center;
  margin-top: 5%;
}

<div class="wrapper">
  <div class="main">
    This is where your overlay content goes, titles, text, buttons, etc.
  </div>
</div>

Можливо, це може допомогти, це не зовсім передумови, але ви розумієте:

<style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
    <div>Hi there</div>
</div>

Досить впевнений, що це ніколи не було побачено аж тут. Але якщо ваша проблема була такою ж, як і моя, це було моїм рішенням:

.imaged-container{
  background-image:url('<%= asset_path("landing-page.png") %> ');
  background-repeat: no-repeat;
  background-size: 100%;
  height: 65vw;
}

Мені хотілося, щоб у центрі зображення було діва, і це дозволить мені це.

Є чисте рішення CSS, яке інші відповіді пропустили.

Властивість "content:" здебільшого використовується для вставки текстового вмісту в елемент, але також може використовуватися для вставки вмісту зображення.

.my-div:before {
    content: url("image.png");
}

Це призведе до того, щоб div змінив свою висоту до фактичного розміру пікселя зображення. Щоб змінити розмір ширини, додайте:

.my-div {
    display: inline-block;
}

Ви можете це зробити на сервері: вимірявши зображення, а потім встановивши розмір div, АБО завантаживши зображення JS, прочитайте його атрибути та встановіть розмір DIV.

І ось ідея, помістіть все те саме зображення у div, що й тег IMG, але надайте йому видимість: приховано + грайте з відносною позиції + надайте цьому діві зображення як фон.

У мене виникло це питання, і я знайшов відповідь Хасанаві, але у мене з’явилася невелика помилка, коли відображалося фонове зображення на широкому екрані - фонове зображення не поширювалося на всю ширину екрана.

Тож ось моє рішення - засноване на коді Хасанаві, але краще ... і це повинно працювати як на позашироких, так і на мобільних екранах.

/*WIDE SCREEN SUPPORT*/
@media screen and (min-width: 769px) { 
    div {
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
    div {
        background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        width: 100%;
        height: 0;
        padding-top: 66.64%; /* (img-height / img-width * container-width) */
                    /* (853 / 1280 * 100) */
    }
}

Як ви могли помітити, background-size: contain;властивість не добре вписується в надзвичайно широкі екрани, а background-size: cover;властивість не добре вписується на екрани мобільних пристроїв, тому я використовував цей @mediaатрибут, щоб пограти з розмірами екрана та виправити цю проблему.

Як щодо цього :)

.fixed-centered-covers-entire-page{
    margin:auto;
    background-image: url('https://i.imgur.com/Ljd0YBi.jpg');
    background-repeat: no-repeat;background-size:cover;
    background-position: 50%;
    background-color: #fff;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:-1;
    position:fixed;
}

<div class="fixed-centered-covers-entire-page"></div>

Демо: http://jsfiddle.net/josephmcasey/KhPaF/

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

Скажімо, ви хочете, щоб співвідношення сторін було 4/1, а ширина даного ключа - 32%:

div {
  width: 32%; 
  padding-bottom: 8%; 
}

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

Можливо, це може допомогти, це не зовсім тло, але ви отримуєте просту думку

    <style>
div {
    float: left;
    position: relative;
}
div img {
    position: relative;
}

div div {
    position: absolute;
    top:0;
    left:0;
}
</style>

<div>
    <img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
    <div>Hello</div>
</div>

Можна зробити щось подібне

<div style="background-image: url(http://your-image.jpg); position:relative;">
 <img src="http://your-image.jpg" style="opacity: 0;" />
<div style="position: absolute;top: 0;width: 100%;height: 100%;">my content goes here</div>
</div>

Якщо ви знаєте співвідношення зображення під час збирання, хочете, щоб висота виходила з висоти вікна, і ви добре орієнтуєтесь на сучасні браузери (IE9 +) , тоді ви можете використовувати для цього одиниці перегляду:

.width-ratio-of-height {
  overflow-x: scroll;
  height: 100vh;
  width: 500vh; /* width here is 5x height */
  background-image: url("http://placehold.it/5000x1000");
  background-size: cover;
}

Не зовсім те, що задавали ОП, але, мабуть, добре підходить для багатьох тих, хто переглядає це питання, тому хотів дати тут ще один варіант.

Fiddle: https://jsfiddle.net/6Lkzdnge/

Я переглянув деякі рішення, і вони чудові, але, думаю, знайшов напрочуд простий спосіб.

Спочатку нам потрібно отримати співвідношення з фонового зображення. Ми просто ділимо один вимір через інший. Тоді ми отримуємо щось на зразок 66,4%

Коли у нас є співвідношення зображень, ми можемо просто обчислити висоту діла, помноживши відношення на ширину огляду:

height: calc(0.664 * 100vw);

Для мене це працює, правильно встановлює висоту Div і змінює її, коли розмір вікна буде змінено.

Припустимо, у вас є щось таке:

<div class="content">
    ... // inner HTML
</div>

і ви хочете додати до нього тло, але ви не знаєте розмір зображення.

У мене була подібна проблема, і я вирішив її за допомогою сітки:

HTML

<div class="outer">
    <div class="content">
        ... // inner HTML
    </div>
    <img class="background" />
</div>

CSS

.outer{
    display: grid;
    grid-template: auto / auto;
    // or you can assign a name for this block
}
.content{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 2;
}
.background{
    grid-area: 1 / 1 / 2 / 2;
    z-index: 1;
}

z-indexце лише для розміщення зображення фактично на задньому плані, звичайно, ви можете розмістити його img.backgroundвище div.content.

ПРИМІТКА : це може спричинити div.contentоднакову висоту малюнка, тому якщо div.contentу дітей є діти, розміщені відповідно до його висоти, ви можете встановити число, а не щось на зразок "авто".

Якщо виникла проблема з CMS Umbraco, і в цьому сценарії ви можете додати зображення до div, використовуючи щось подібне для атрибута 'style' div:

style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"

Я певний час займався цією проблемою і вирішив написати плагін jquery, щоб вирішити цю проблему. Цей плагін знайде всі елементи класу "show-bg" (або ви можете передати його власним селектором) та обчислить їх розміри фонового зображення. все, що вам потрібно зробити, це включити цей код, позначити потрібні елементи класом = "показати

Насолоджуйтесь!

https://bitbucket.org/tomeralmog/jquery.heightfrombg

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

Наприклад. ти маєш

<br/>
<div> . //This you set the width percent to %100
    <div> //This you set the width percent to any amount . if you put it by 50% , it will be half
    </div>
 </div>

Це найкращий варіант, якщо ви хочете чуйний макет, я б не рекомендував плавати, в деяких випадках флоат добре використовувати. але в більшості випадків ми уникаємо використання float, оскільки це вплине на велику кількість речей, коли ви робите крос-браузерне тестування.

Сподіваюся, це допомагає :)

насправді це досить просто, коли ти знаєш, як це зробити:

<section data-speed='.618' data-type='background' style='background: url(someUrl) 
top center no-repeat fixed;  width: 100%; height: 40vw;'>
<div style='width: 100%; height: 40vw;'>
</div>
</section>

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

Я вирішив це за допомогою jQuery. До тих пір, поки нові правила CSS не дозволяють мати подібний тип поведінки, я вважаю, що це найкращий спосіб зробити це.

Налаштуйте свої діви

Нижче у вас є ваш div, який ви хочете, щоб фон відображався на ("герой"), а потім внутрішній вміст / текст, який ви хочете накласти поверх вашого фонового зображення ("внутрішнього"). Ви можете (і повинні) переміщувати стилі вбудованого рівня до свого класу героїв. Я залишив їх тут, тому швидко і легко зрозуміти, які стилі до нього застосовані.

<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
    <div class="inner">overlay content</div>
</div>

Розрахуйте співвідношення сторін зображення

Далі обчисліть співвідношення сторін для зображення, розділивши висоту зображення на ширину. Наприклад, якщо висота зображення - 660, а ширина - 1280, співвідношення сторін - 0,5156.

Настройте подію зміни розміру вікна jQuery для регулювання висоти

Нарешті, додайте слухача подій jQuery для зміни розміру вікна, а потім обчисліть висоту героя Div на основі вибору співвідношення сторін та оновіть його. Зазвичай це рішення залишає зайвий піксель внизу через недосконалі обчислення, використовуючи співвідношення сторін, тому ми додаємо -1 до отриманого розміру.

$(window).on("resize", function ()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

Переконайтеся, що він працює при завантаженні сторінки

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

function updateHeroDiv()
{
    var aspect_ratio = .5156; /* or whatever yours is */
    var new_hero_height = ($(window).width()*aspect_ratio) - 1;
    $(".hero").height(new_hero_height);
}

$(document).ready(function() 
{       
    // calls the function on page load
    updateHeroDiv(); 

    // calls the function on window resize
    $(window).on("resize", function ()
    {
        updateHeroDiv();        
    }
});

Якщо ви можете створити зображення на Photoshop, де основний шар має непрозорість 1 або близько того і є в основному прозорим, помістіть цей img у діву, а потім зробіть реальну картинку фоновим зображенням. ТОГО встановіть непрозорість img на 1 та додайте потрібні розміри розмірів.

Ця картина зроблена саме так, і ви навіть не можете перетягнути невидиме зображення зі спокійної сторінки.

просто додати до div

style="overflow:hidden;"