วิธีรับความสูง div เพื่อปรับขนาดพื้นหลังโดยอัตโนมัติได้อย่างไร

ฉันจะให้ div ปรับขนาดของพื้นหลังที่ฉันตั้งไว้โดยอัตโนมัติได้อย่างไรโดยไม่ต้องตั้งค่าความสูงเฉพาะ (หรือความสูงขั้นต่ำ)

อีกประการหนึ่งอาจจะไม่มีประสิทธิภาพ, การแก้ปัญหาที่จะรวมภาพภายใต้ชุดองค์ประกอบimg visibility: hidden;จากนั้นให้background-imagediv ที่อยู่โดยรอบเหมือนกันกับภาพ

สิ่งนี้จะตั้ง div ที่ล้อมรอบเป็นขนาดของรูปภาพใน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 ของคุณ

คำตอบนี้คล้ายกับคำอื่น ๆ แต่โดยรวมแล้วดีที่สุดสำหรับแอปพลิเคชั่นส่วนใหญ่ คุณจำเป็นต้องรู้ขนาดภาพก่อนมือที่คุณมักจะทำ การทำเช่นนี้จะช่วยให้คุณสามารถเพิ่มข้อความซ้อนทับชื่อเรื่อง ฯลฯ โดยไม่มีการซ้อนทับเชิงลบหรือการวางตำแหน่งที่แน่นอนของภาพ กุญแจสำคัญคือการตั้งค่า padding% เพื่อให้ตรงกับอัตราส่วนภาพตามที่เห็นในตัวอย่างด้านล่าง ฉันใช้คำตอบนี้และเพิ่งเพิ่มพื้นหลังรูปภาพ

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

ฉันต้องการให้ div อยู่ตรงกลางของรูปภาพและนี่จะทำให้ฉันเป็นแบบนั้น

มีวิธีแก้ปัญหา CSS บริสุทธิ์ที่คำตอบอื่น ๆ พลาด

คุณสมบัติ "เนื้อหา:" ส่วนใหญ่จะใช้เพื่อแทรกเนื้อหาข้อความลงในองค์ประกอบ แต่ยังสามารถใช้เพื่อแทรกเนื้อหารูปภาพ

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

สิ่งนี้จะทำให้ div ปรับขนาดความสูงเป็นขนาดพิกเซลที่แท้จริงของรูปภาพ หากต้องการปรับขนาดความกว้างให้เพิ่ม:

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

คุณสามารถทำได้ฝั่งเซิร์ฟเวอร์: โดยการวัดภาพแล้วตั้งค่าขนาด div หรือโหลดภาพด้วย JS อ่านคุณสมบัติของมันแล้วตั้งค่าขนาด DIV

และนี่คือแนวคิดวางภาพเดียวกันภายใน div เป็นแท็ก IMG แต่ให้มองเห็นได้: ซ่อน + เล่นกับตำแหน่งญาติ + ให้ภาพนี้เป็นพื้นหลัง div

ฉันมีปัญหานี้และพบคำตอบของ 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) */
    }
}

อย่างที่คุณอาจสังเกตเห็นว่า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 และความกว้างของ div คือ 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;
}

ไม่ใช่สิ่งที่ OP ขอมา แต่อาจเป็นแบบที่ดีสำหรับผู้ที่กำลังดูคำถามนี้มากมายดังนั้นจึงอยากให้ตัวเลือกอื่นที่นี่

ซอ: https://jsfiddle.net/6Lkzdnge/

ฉันดูวิธีแก้ปัญหาบางข้อและพวกมันก็เยี่ยม แต่ฉันคิดว่าฉันพบวิธีที่ง่ายอย่างน่าประหลาดใจ

อันดับแรกเราต้องได้รับอัตราส่วนจากภาพพื้นหลัง เราเพียงแค่แบ่งหนึ่งมิติผ่านอีกมิติหนึ่ง จากนั้นเราจะได้ตัวอย่างเช่น 66.4%

เมื่อเรามีอัตราส่วนภาพเราสามารถคำนวณความสูงของ div โดยการคูณอัตราส่วนด้วยความกว้างวิวพอร์ต:

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มีเด็ก ๆ ที่วางตามความสูงคุณอาจต้องการตั้งค่าตัวเลขที่ไม่ใช่ 'อัตโนมัติ'

หากพบปัญหานี้กับ Umbraco CMS และในสถานการณ์นี้คุณสามารถเพิ่มภาพลงใน 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" (หรือคุณสามารถผ่านตัวเลือกของคุณเอง) และคำนวณขนาดภาพพื้นหลังของพวกเขา สิ่งที่คุณต้องทำคือใส่รหัสนี้ทำเครื่องหมายองค์ประกอบที่ต้องการด้วยการแสดง class = "

สนุก!

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 ในบางกรณีการใช้ float นั้นไม่เป็นไร แต่ในกรณีส่วนใหญ่เราหลีกเลี่ยงการใช้ 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 ที่คุณต้องการให้พื้นหลังปรากฏบน ("ฮีโร่") จากนั้นเนื้อหาภายใน / ข้อความที่คุณต้องการซ้อนทับด้านบนของภาพพื้นหลังของคุณ ("Inner") คุณสามารถ (และควร) ย้ายสไตล์อินไลน์ไปยังชั้นฮีโร่ของคุณ ฉันทิ้งไว้ที่นี่ดังนั้นจึงเป็นเรื่องง่ายและรวดเร็วในการดูว่าสไตล์ใดที่นำไปใช้กับมัน

<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 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 นั้นใน div แล้วทำให้ภาพจริงเป็นภาพพื้นหลัง จากนั้นตั้งค่าความทึบของ img เป็น 1 และเพิ่มขนาดขนาดที่คุณต้องการ

ภาพนั้นทำแบบนั้นและคุณไม่สามารถแม้แต่ลากภาพที่มองไม่เห็นออกจากหน้าเว็บที่เท่ห์

เพียงแค่เพิ่ม div

style="overflow:hidden;"