พื้นหลัง CSS ยืดและปรับขนาด

มีวิธีในการรับพื้นหลังใน CSS เพื่อขยายหรือขยายเพื่อเติมในคอนเทนเนอร์หรือไม่

สำหรับเบราว์เซอร์สมัยใหม่คุณสามารถทำได้โดยใช้background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover หมายถึงการยืดภาพไม่ว่าจะเป็นแนวตั้งหรือแนวนอนดังนั้นจึงไม่เคยเรียงต่อ / ซ้ำ

สิ่งนี้จะใช้ได้กับ Safari 3 (หรือใหม่กว่า), Chrome, Opera 10+, Firefox 3.6+ และ Internet Explorer 9 (หรือใหม่กว่า)

เพื่อให้ทำงานได้กับ verion ที่ต่ำกว่าของ Internet Explorer ให้ลองใช้ CSS เหล่านี้:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

ใช้คุณสมบัติCSS 3background-size :

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

สิ่งนี้สามารถใช้ได้กับเบราว์เซอร์ที่ทันสมัยตั้งแต่ปี 2012

ไม่สามารถปรับขนาดรูปภาพด้วย CSS ได้ แต่สามารถทำเอฟเฟกต์ที่คล้ายกันได้ในลักษณะต่อไปนี้

ใช้มาร์กอัปนี้:

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

ด้วย CSS ต่อไปนี้:

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

และคุณควรจะทำ!

ในการปรับขนาดภาพให้เป็น "เต็มขอบ" และคงอัตราส่วนไว้คุณสามารถทำได้ดังนี้:

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

มันออกมาค่อนข้างดี! หากมีการตัดส่วนข้อมูลหนึ่งส่วนข้อมูลนั้นจะถูกครอบตัดด้านเดียวของรูปภาพแทนที่จะถูกครอบตัดทั้งสองด้านอย่างสม่ำเสมอ (และอยู่กึ่งกลาง) ฉันทดสอบใน Firefox, Webkitและ Internet Explorer 8 แล้ว

ใช้แอตทริบิวต์ background-size ใน CSS3:

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

แก้ไข: Modernizrรองรับการตรวจจับการสนับสนุนขนาดพื้นหลังการตรวจสอบของการสนับสนุนพื้นหลังขนาดคุณสามารถใช้วิธีแก้ปัญหา JavaScript ที่เขียนขึ้นเพื่อทำงานอย่างไรก็ตามคุณต้องการและโหลดแบบไดนามิกเมื่อไม่มีการสนับสนุน วิธีนี้จะทำให้โค้ดสามารถบำรุงรักษาได้โดยไม่ต้องหันไปใช้ CSS แฮ็กที่ล่วงล้ำสำหรับเบราว์เซอร์บางตัว

ส่วนตัวผมใช้สคริปต์เพื่อจัดการกับมันใช้ jQuery, การปรับตัวของimgsizer เนื่องจากการออกแบบส่วนใหญ่ตอนนี้ฉันใช้ความกว้าง% สำหรับโครงร่างของเหลวในอุปกรณ์จึงมีการปรับเล็กน้อยในลูปหนึ่ง (การบัญชีสำหรับขนาดที่ไม่เสมอ 100%):

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

แก้ไข: คุณอาจจะสนใจในjQuery CSS3 Finaliz [s]อี

ลองบทความพื้นหลังขนาด หากคุณใช้สิ่งต่อไปนี้ทั้งหมดมันจะทำงานในเบราว์เซอร์ส่วนใหญ่ยกเว้น Internet Explorer

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
} 

ไม่ใช่ในปัจจุบัน มันจะพร้อมใช้งานในCSS 3แต่จะใช้เวลาสักครู่จนกว่าจะมีการใช้งานในเบราว์เซอร์ส่วนใหญ่

.style1 {
        background: url(images/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

ทำงานใน:

• Safari 3+
• Chrome ไม่ว่าจะ +
• IE 9+
• Opera 10+ (รองรับ 9.5 ขนาดพื้นหลัง แต่ไม่ใช่คำหลัก)
• Firefox 3.6+ (Firefox 4 รองรับเวอร์ชันนำหน้าที่ไม่ใช่ผู้ขาย)

นอกจากนี้คุณสามารถลองวิธีนี้เพื่อหาวิธีแก้ปัญหาเช่น

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;

ให้เครดิตกับบทความนี้โดย Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

คำเดียว: ไม่ วิธีเดียวที่จะยืดภาพคือใช้<img>แท็ก คุณจะต้องมีความคิดสร้างสรรค์

สิ่งนี้เคยเป็นจริงในปี 2008 เมื่อคำตอบถูกเขียน ปัจจุบันเบราว์เซอร์รุ่นใหม่รองรับการbackground-sizeแก้ไขปัญหานี้ ระวังว่า IE8 ไม่รองรับ

กำหนด "ยืดและขยาย" ...

หากคุณมีรูปแบบบิตแมปโดยทั่วไปจะไม่ดี (การพูดแบบกราฟิก) ที่จะยืดและดึงออกมา คุณสามารถใช้รูปแบบที่ทำซ้ำได้เพื่อให้ภาพลวงตาของเอฟเฟกต์เดียวกัน ตัวอย่างเช่นหากคุณมีการไล่ระดับสีที่เบาลงไปที่ด้านล่างของหน้าคุณจะต้องใช้กราฟิกที่มีความกว้างพิกเซลเดียวและความสูงเท่ากับภาชนะของคุณ (หรือใหญ่กว่าเพื่อปรับขนาด) แล้วเรียงภาพให้ทั่ว หน้า. ในทำนองเดียวกันหากการไล่ระดับสีวิ่งข้ามหน้ากระดาษจะมีความสูงหนึ่งพิกเซลและกว้างกว่าที่เก็บของคุณและทำซ้ำหน้าเว็บ

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

หากคุณต้องการเอฟเฟกต์ที่ต้องอาศัยกล่องที่มีขอบโค้งคุณก็จะติดด้านซ้ายของกล่องไปทางซ้ายของตู้คอนเทนเนอร์ของคุณโดยมีการทับซ้อนพอที่ (ภายในเหตุผล) ไม่ว่าจะมีขนาดใหญ่แค่ไหน วิ่งออกมาจากพื้นหลังแล้วคุณเลเยอร์ภาพด้านขวาของกล่องที่มีขอบโค้งและวางไว้ที่ด้านขวาของภาชนะ ดังนั้นเมื่อภาชนะบรรจุหดตัวหรือเติบโตขึ้นเอฟเฟกต์กล่องโค้งดูเหมือนว่าจะหดตัวหรือเติบโตไปพร้อมกัน - ในความเป็นจริงมันไม่ได้เป็นจริง แต่ให้ภาพลวงตาว่าเกิดอะไรขึ้น

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

หากคุณใช้กราฟิกแบบเวกเตอร์แสดงว่าคุณมีความเชี่ยวชาญ

นี่คือสิ่งที่ฉันทำ autoในชั้นเรียนการยืดผมก็เปลี่ยนความสูง วิธีนี้ภาพพื้นหลังของคุณจะมีขนาดเท่ากับความกว้างของหน้าจอเสมอและความสูงนั้นจะมีขนาดที่เหมาะสม

#background {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

เพิ่มbackground-attachmentบรรทัด:

#background {
    background-attachment:fixed;
    width: 100%; 
    height: 100%; 
    position: absolute; 
    margin-left: 0px; 
    margin-top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

ฉันต้องการจะชี้ให้เห็นว่าสิ่งนี้เทียบเท่ากับการทำ:

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

ทางออกที่ยอดเยี่ยมอีกข้อหนึ่งสำหรับเรื่องนี้คือ Backstretch ของ Srobbin ซึ่งสามารถนำไปใช้กับร่างกายหรือองค์ประกอบใด ๆ ในหน้า - http://srobbin.com/jquery-plugins/backstretch/

ลองสิ่งนี้

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

เคล็ดลับเพิ่มเติมสำหรับการโกงของ SolidSmile คือการปรับขนาด (การปรับขนาดตามสัดส่วน) โดยการตั้งค่าความกว้างและการใช้ความสูงอัตโนมัติ

Ex:

#background {
    width: 500px;
    height: auto;
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

ใช้border-image : yourimageคุณสมบัตินี้เพื่อตั้งค่าภาพของคุณและปรับให้กว้างจนสุดขอบของหน้าจอหรือหน้าต่าง