كيفية الحصول على ارتفاع div لضبط حجم الخلفية تلقائيًا؟

Question

كيف يمكنني الحصول على div لضبط حجم الخلفية تلقائيًا الذي قمت بتعيينه له دون تعيين ارتفاع معين (أو أدنى ارتفاع) له؟

Answer 1

وآخر، وربما غير فعالة، والحل سيكون لتشمل صورة تحت عنصر 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>

Answer 2

وهناك طريقة لطيفة جدا وباردة لجعل عمل صورة خلفية مثل عنصر 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. هنا هو نموذج العمل (يمكنك تغيير حجم والتحقق من ارتفاع شعبة): http://jsfiddle.net/TPEFn/ 2 /

Answer 3

وليس هناك طريقة لصناعة السيارات ضبط حجم الصورة الخلفية باستخدام CSS.

ويمكنك الإختراق من حوله عن طريق قياس صورة خلفية على الخادم ثم تطبيق تلك السمات إلى شعبة، كما ذكر آخرون.

هل يمكن أن الإختراق أيضا بعض جافا سكريبت لتغيير حجم شعبة استنادا إلى حجم الصورة (مرة واحدة وقد تم تحميل الصورة) - وهذا هو في الأساس نفس الشيء

إذا كنت تحتاج شعبة لصناعة السيارات في صالح الصورة، وأنا قد تسأل لماذا لا عليك فقط وضع علامة <img> داخل شعبة بك؟

Answer 4

وهذه الإجابة هي مشابهة للآخرين، ولكن هي عموما أفضل لمعظم التطبيقات. عليك أن تعرف حجم الصورة قبل اليد التي تفعل عادة. هذا وسوف تمكنك من إضافة تراكب النص، والعناوين وما إلى ذلك مع أي الحشو سلبي أو المواقع المطلق للصورة. هم المفتاح هو وضع الحشو٪ لتتناسب مع نسبة صورة الجانب كما رأينا في المثال أدناه. اعتدت هذه الإجابة و أساسا اضاف عادل خلفية الصورة.

.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>

Answer 5

وربما هذا يمكن أن تساعد، انها ليست بالضبط الخلفية، ولكن تحصل على هذه الفكرة:

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

Answer 6

ومتأكد سوف يحدث له مثيل من كل هذا الطريق إلى هنا. ولكن إذا كانت مشكلتك نفس الألغام، وكان هذا حل بي:

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

وأردت أن يكون لها شعبة في وسط الصورة، وهذا سوف يسمح لي بذلك.

Answer 7

وهناك حل CSS النقي الذي الإجابات الأخرى قد غاب.

وو"المحتوى". يستخدم خاصية معظمها لإدراج مضمون النص إلى عنصر، ولكن يمكن أيضا أن تستخدم لادخال محتوى الصورة

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

وهذا سوف يسبب شعبة لتغيير حجم ارتفاعه إلى حجم بكسل الفعلي للصورة. لتغيير حجم العرض أيضا، إضافة:

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

Answer 8

ويمكنك القيام بذلك من جانب الخادم: عن طريق قياس الصورة ثم تحديد حجم شعبة، أو تحميل صورة مع JS، قراءتها من سمات ثم قم بتعيين حجم DIV

.

وهنا هو فكرة، ووضع نفس الصورة داخل شعبة كما علامة IMG، ولكن تعطيه الرؤية: مخفي + اللعب مع موقف قريب + يعطي لهذه الدرجة صورة كخلفية

Answer 9

وكان لي هذه المسألة وجدت الجواب Hasanavi ولكن حصلت على القليل من الأخطاء عند عرض صورة خلفية على شاشة واسعة -. ولم صورة الخلفية لم ينتشر إلى عرض كامل الشاشة

وحتى هنا هو بلدي الحل - على أساس قانون Hasanavi ولكن أفضل ... وهذا يجب أن تعمل على كل شاشات اضافية واسعة والمتنقلة

.

/*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) */
    }
}

وكما كنت قد لاحظت، وDOAS الملكية background-size: contain; لا يصلح جيدا في شاشات واسعة إضافية، والخاصية background-size: cover; لا يصلح لشاشات الجوال لذلك تستخدم هذه السمة @media للعب مع حولها أحجام الشاشة وإصلاح هذه المشكلة.

Answer 10

وماذا عن هذا :)

.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/

Answer 11

إذا هو صورة خلفية محددة سلفا واحدة وتريد شعبة إلى أن يستجيب دون تشويه نسبة الارتفاع من صورة الخلفية يمكنك أولا حساب نسبة الجانب من الصورة ثم قم بإنشاء شعبة الذي يحافظ على انها نسبة الارتفاع من قبل القيام بما يلي:

ويقول كنت ترغب في نسبة الارتفاع من 4/1 والعرض من شعبة هو 32٪:

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

وهذا ناتج عن حقيقة أن يتم احتساب الحشو بناء على عرض عنصر يحتوي على.

Answer 12

قد يكون هذا يمكن أن تساعد، انها ليست بالضبط الخلفية، ولكن تحصل على فكرة بسيطة

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

Answer 13

ويمكنك أن تفعل شيئا من هذا القبيل

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

Answer 14

وكان هذا الموضوع مع Umbraco CMS وفي هذا السيناريو يمكنك إضافة صورة إلى شعبة باستخدام شيء من هذا القبيل للسمة 'أسلوب' من شعبة:

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

Answer 15

ولقد تم التعامل مع هذه المسألة لفترة من الوقت، وقررت أن أكتب المساعد مسج على حل هذه المشكلة. فإن هذا البرنامج المساعد تجد جميع العناصر مع الطبقة "اظهار بي جي" (أو يمكنك تمريرها محدد الخاص بك) وحساب أبعادها صورة الخلفية. كل ما عليك القيام به هو تضمين هذا الرمز، بمناسبة العناصر المطلوبة مع الطبقة = "العرض

واستمتع!

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

Answer 16

وأفضل حل أستطيع أن أفكر في تحديد العرض والطول في المئة. هذا سيسمح لك rezise الشاشة بناء على حجم الشاشة. لها أكثر من تخطيط استجابة ..

لمثيل. لديك

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

وهذا هو الخيار الأفضل إذا كنت تريد تخطيط الاستجابة، وأنا لا أوصى تعويم، في بعض الحالات تطفو على ما يرام للاستخدام. ولكن في معظم الحالات، ونحن تجنب استخدام تعويم لأنها سوف تؤثر على غاية من عدد من الأشياء عندما تقومون به اختبار عبر متصفح.

ويساعد هذا الأمل:)

Answer 17

والواقع أنه من السهل جدا عندما تعلم كيفية القيام بذلك:

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

والحيلة هي فقط لتعيين شعبة المغلقة مثلما شعبة العادي مع القيم الأبعاد نفس القيم الأساسية الأبعاد (في هذا المثال، 100٪ و40vw).

Answer 18

لقد قمت بحل هذه المشكلة باستخدام jQuery.وإلى أن تسمح قواعد CSS الجديدة بهذا النوع من السلوك محليًا، أجد أنها أفضل طريقة للقيام بذلك.

قم بإعداد div الخاص بك

يوجد أدناه 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);
}

تأكد من أنه يعمل عند تحميل الصفحة

يجب عليك إجراء استدعاء تغيير الحجم أعلاه عند تحميل الصفحة حتى يتم حساب أحجام الصور في البداية.إذا لم تقم بذلك، فلن يتم ضبط قسم البطل حتى تقوم بتغيير حجم النافذة.أقوم بإعداد وظيفة منفصلة لإجراء تعديلات تغيير الحجم.إليك الرمز الكامل الذي أستخدمه.

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();        
    }
});

Answer 19

إذا كنت يمكن أن تجعل صورة على فوتوشوب حيث الطبقة الرئيسية وغموض 1 أو نحو ذلك وشفافة في الأساس، وطرح أن IMG في شعبة ثم جعل الصورة الحقيقية للصورة الخلفية. بعد ذلك مجموعة من الابهام من IMG إلى 1 وإضافة أبعاد الحجم الذي تريده.

ويتم تلك الصورة بهذه الطريقة، وأنت لا تستطيع حتى اسحب صورة غير مرئية خارج الصفحة وهو بارد.

Answer 20

وفقط إضافة إلى div

style="overflow:hidden;"