ภาพพื้นหลัง CSS ให้พอดีกับความกว้างความสูงควรปรับสัดส่วนแบบอัตโนมัติ

ฉันมี

body {
    background: url(images/background.svg);
}

ผลที่ต้องการคือภาพพื้นหลังนี้จะมีความกว้างเท่ากับหน้าความสูงเปลี่ยนไปเพื่อรักษาสัดส่วน เช่นหากภาพต้นฉบับมีขนาด 100 * 200 (หน่วยใด ๆ ) และตัวกล้องมีความกว้าง 600px ภาพพื้นหลังควรจะมีความสูง 1200px ความสูงควรเปลี่ยนโดยอัตโนมัติหากปรับขนาดหน้าต่าง เป็นไปได้ไหม

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

นอกจากนี้ Chrome กำลังวางภาพไว้ตรงกลางไม่ต้องทำซ้ำแม้เมื่อbackground-repeat:repeatได้รับอย่างชัดเจนซึ่งเป็นค่าเริ่มต้นอยู่ดี

มีคุณสมบัติ CSS3 สำหรับเรื่องนี้คือbackground-size( ตรวจสอบความเข้ากันได้ ) ขณะที่หนึ่งสามารถตั้งค่าความยาวก็มักจะใช้ที่มีค่าพิเศษและcontain coverในกรณีเฉพาะของคุณคุณควรใช้cover:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

การผลิตไข่สำหรับcontainและcover

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

เราต้องการใช้รูปภาพดังกล่าวของวันนี้เป็นพื้นหลัง อย่างไรก็ตามเราตัดภาพเป็น 4x3 ด้วยเหตุผลบางอย่าง เราสามารถตั้งค่าbackground-sizeคุณสมบัติการความยาวคงที่บาง แต่เราจะเน้นและcontain coverโปรดทราบว่าฉันคิดว่าเราไม่ได้ทำให้ความกว้างและ / หรือความสูงของbodyมันสั้นลง

contain

contain

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

สิ่งนี้ทำให้แน่ใจได้ว่าภาพพื้นหลังจะอยู่ในพื้นที่การวางตำแหน่งพื้นหลังเสมออย่างไรก็ตามอาจมีพื้นที่ว่างที่เต็มไปด้วยของคุณbackground-colorในกรณีนี้:

cover

cover

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

ทำให้แน่ใจว่าภาพพื้นหลังครอบคลุมทุกอย่าง จะไม่สามารถมองเห็นได้ background-colorอย่างไรก็ตามขึ้นอยู่กับอัตราส่วนของหน้าจอส่วนใหญ่ของภาพของคุณอาจถูกตัดออก:

การสาธิตด้วยรหัสจริง

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

ตามเคล็ดลับจากhttps://developer.mozilla.org/en-US/docs/CSS/background-sizeฉันจบด้วยสูตรต่อไปนี้ที่เหมาะกับฉัน

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}

ฉันไม่แน่ใจว่าสิ่งที่คุณกำลังมองหา แต่คุณควรตรวจสอบโพสต์บล็อกที่ยอดเยี่ยมเหล่านี้เขียนโดย Chris Coyier จาก CSS-Tricks:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

อ่านคำอธิบายสำหรับแต่ละบทความและดูว่าเป็นสิ่งที่คุณต้องการหรือไม่

ก่อนตอบคำถามต่อไปนี้:

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

เป้าหมายของโพสต์ที่สองคือการรับสิ่งต่อไปนี้เป็น "ภาพพื้นหลังบนเว็บไซต์ที่ครอบคลุมหน้าต่างเบราว์เซอร์ทั้งหมดตลอดเวลา"

หวังว่านี่จะช่วยได้

ภาพพื้นหลังไม่ได้ตั้งค่าสมบูรณ์แบบ css ของเขามีปัญหาในการสร้างดังนั้นไฟล์ css ของเขาเปลี่ยนเป็นรหัสด้านล่าง

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

%; ขนาดพื้นหลัง: 100% 100%; "

ลองนี้

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

เพียงเพิ่มหนึ่งบรรทัดนี้:

    .your-class {
        height: 100vh;
    }

vh คือความสูงของวิวพอร์ต การดำเนินการนี้จะปรับขนาดให้พอดีกับหน้าต่างเบราว์เซอร์ของอุปกรณ์โดยอัตโนมัติ

ตรวจสอบเพิ่มเติมที่นี่: สร้างความสูงของหน้าต่างเบราว์เซอร์ div 100%

body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}

ฉันมีปัญหาเดียวกันไม่สามารถปรับขนาดรูปภาพเมื่อปรับขนาดเบราว์เซอร์

รหัสไม่ดี:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

รหัสที่ดี:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

กุญแจที่นี่คือการเพิ่มองค์ประกอบนี้ -> พื้นหลังขนาด: มี;

นี่คือสิ่งที่ทำงานสำหรับฉัน:

background-size: auto 100%;

การตั้งค่าขนาดพื้นหลังไม่ได้ช่วยโซลูชันต่อไปนี้ใช้ได้สำหรับฉัน:

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

โดยทั่วไปจะครอบตัดรูปภาพและทำให้พอดี แต่background-size: contain/coverก็ไม่ได้ทำให้พอดี