ฉันต้องการตั้งค่าภาพพื้นหลังเป็น div ต่างๆ แต่ปัญหาของฉันคือ:

1. ขนาดของภาพคงที่ (60px)
2. ขนาดของ div ที่แตกต่างกันไป

ฉันจะยืดภาพพื้นหลังให้เต็มพื้นหลังทั้งหมดของ div ได้อย่างไร

#div2{
  background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
  height:180px;
  width:200px;
  border: 1px solid red;
}

ตรวจสอบรหัสที่นี่

เพิ่ม

background-size:100% 100%;

ไปยัง css ของคุณใต้ภาพพื้นหลัง

คุณยังสามารถระบุขนาดที่แน่นอนได้เช่น:

background-size: 30px 40px;

ที่นี่: JSFiddle

คุณสามารถใช้ได้:

background-size: cover;

หรือใช้ภาพพื้นหลังขนาดใหญ่กับ:

background: url('../images/teaser.jpg') no-repeat center #eee;

Modern CSS3 (แนะนำสำหรับอนาคตและอาจเป็นทางออกที่ดีที่สุด)

.selector{
   background-size: cover;
   /* stretches background WITHOUT deformation so it would fill the background space,
      it may crop the image if the image's dimensions are in different ratio,
      than the element dimensions. */
}

สูงสุด ยืดโดยไม่มีการครอบตัดหรือการผิดรูป(อาจไม่เต็มพื้นหลัง) : background-size: contain;
ออกแรงยืดแบบสัมบูรณ์(อาจทำให้เสียรูปทรง แต่ไม่มีการครอบตัด) : background-size: 100% 100%;

"CSS" แบบเก่าใช้งานได้เสมอ "

รูปภาพการกำหนดตำแหน่งที่แน่นอนเป็นลูกคนแรกของแม่(ตำแหน่งสัมพัทธ์)และยืดให้เท่ากับขนาดแม่

HTML

<div class="selector">
   <img src="path.extension" alt="alt text">
   <!-- some other content -->
</div>

เทียบเท่ากับ CSS3 background-size: cover;:

เพื่อให้บรรลุสิ่งนี้แบบไดนามิกคุณจะต้องใช้วิธีการที่ตรงกันข้ามกับวิธีการมีทางเลือก (ดูด้านล่าง) และหากคุณต้องการจัดกึ่งกลางภาพที่ครอบตัดคุณจะต้องใช้ JavaScript เพื่อทำสิ่งนั้นแบบไดนามิกเช่นการใช้ jQuery:

$('.selector img').each(function(){ 
   $(this).css({ 
      "left": "50%", 
      "margin-left": "-"+( $(this).width()/2 )+"px", 
      "top": "50%", 
      "margin-top": "-"+( $(this).height()/2 )+"px" 
   }); 
});

ตัวอย่างการปฏิบัติ:

เทียบเท่ากับ CSS3 background-size: contain;:

อันนี้อาจเป็นเรื่องยากเล็กน้อย - ขนาดของพื้นหลังของคุณที่จะล้นออกมาผู้ปกครองจะมีการตั้งค่า CSS เป็น 100% เมื่ออีกอันหนึ่งเป็นอัตโนมัติ ตัวอย่างการปฏิบัติ:

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: auto;
   /* -- OR -- */
   /* width: auto; 
      height: 100%; */
}

เทียบเท่ากับ CSS3 background-size: 100% 100%;:

.selector img{
   position: absolute; top:0; left: 0;
   width: 100%;
   height: 100%;
}

ป.ล. : ในการทำสิ่งที่เทียบเท่าปก / บรรจุในแบบ "เก่า" อย่างสมบูรณ์แบบไดนามิก (ดังนั้นคุณจะไม่ต้องสนใจเรื่องล้น / อัตราส่วน) คุณจะต้องใช้จาวาสคริปต์เพื่อตรวจหาอัตราส่วนสำหรับคุณและตั้งค่าขนาดตามที่อธิบายไว้ ..

สำหรับสิ่งนี้คุณสามารถใช้background-sizeคุณสมบัติCSS3 เขียนดังนี้:

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    -moz-background-size:100% 100%;
    -webkit-background-size:100% 100%;
    background-size:100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

ตรวจสอบสิ่งนี้: http://jsfiddle.net/qdzaw/1/

คุณสามารถเพิ่ม:

#div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    background-size: 100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}

คุณสามารถอ่านเพิ่มเติมได้ที่นี่: css3 background-size

body{
  margin:0;
  background:url('image.png') no-repeat 50% 50% fixed;
  background-size: cover;
}

โดยใช้คุณสมบัติ css:

background-size: cover;

ใช้: พื้นหลังขนาด: 100% 100%; เพื่อสร้างภาพพื้นหลังให้พอดีกับขนาด div

หากต้องการรักษาอัตราส่วนให้ใช้ background-size: 100% auto;

div {
    background-image: url('image.jpg');
    background-size: 100% auto;
    width: 150px;
    height: 300px;
}

ลองทำสิ่งนี้:

div {
    background-image: url(../img/picture1.jpg);
    height: 30em;
    background-repeat: no-repeat;
    width: 100%;
    background-position: center;
}