ภาพพื้นหลังกว้าง 100% ที่มีความสูง "อัตโนมัติ"

ฉันกำลังทำงานกับหน้า Landing Page สำหรับมือถือของ บริษัท แห่งหนึ่ง มันเป็นเลย์เอาต์พื้นฐานจริงๆ แต่ด้านล่างส่วนหัวจะมีรูปภาพของผลิตภัณฑ์ซึ่งจะมีความกว้าง 100% เสมอ (การออกแบบจะแสดงให้เห็นว่ามันเรียงจากขอบถึงขอบเสมอ) ขึ้นอยู่กับความกว้างของหน้าจอความสูงของภาพจะปรับตามอย่างเห็นได้ชัด เดิมทีฉันทำสิ่งนี้ด้วย img (โดยมีความกว้าง CSS 100%) และใช้งานได้ดี แต่ฉันรู้ว่าฉันต้องการใช้แบบสอบถามสื่อเพื่อแสดงภาพที่แตกต่างกันตามความละเอียดที่แตกต่างกันสมมติว่ามีขนาดเล็กกลางและ ตัวอย่างเช่นภาพเดียวกันขนาดใหญ่ ฉันรู้ว่าคุณไม่สามารถเปลี่ยน img src ด้วย CSS ได้ดังนั้นฉันจึงคิดว่าฉันควรใช้พื้นหลัง CSS สำหรับรูปภาพแทนที่จะเป็นแท็ก img ใน HTML

ดูเหมือนว่าจะทำงานไม่ถูกต้องเนื่องจาก div ที่มีภาพพื้นหลังต้องการทั้งความกว้างและความสูงเพื่อแสดงพื้นหลัง เห็นได้ชัดว่าฉันสามารถใช้ 'width: 100%' ได้ แต่ฉันจะใช้ความสูงอะไร ฉันสามารถใส่ความสูงคงที่แบบสุ่มเช่น 150px จากนั้นฉันจะเห็น 150px บนสุดของรูปภาพ แต่นี่ไม่ใช่วิธีแก้ปัญหาเนื่องจากไม่มีความสูงคงที่ ฉันเล่นและพบว่าเมื่อมีความสูงแล้ว (ทดสอบด้วย 150px) ฉันสามารถใช้ 'background-size: 100%' เพื่อให้พอดีกับรูปภาพใน div ได้อย่างถูกต้อง ฉันสามารถใช้ CSS3 ล่าสุดสำหรับโปรเจ็กต์นี้ได้เนื่องจากมีเป้าหมายที่มือถือเท่านั้น

ฉันได้เพิ่มตัวอย่างคร่าวๆด้านล่าง โปรดแก้ตัวด้วยรูปแบบอินไลน์ แต่ฉันต้องการยกตัวอย่างพื้นฐานเพื่อพยายามทำให้คำถามของฉันชัดเจนขึ้นเล็กน้อย

<div id="image-container">
    <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div>
</div>

ฉันอาจจะต้องให้เปอร์เซ็นต์ความสูงของคอนเทนเนอร์ div ตามทั้งหน้าหรือว่าฉันดูผิดไปหมด?

นอกจากนี้คุณคิดว่าพื้นหลัง CSS เป็นวิธีที่ดีที่สุดในการทำเช่นนี้หรือไม่? อาจมีเทคนิคที่ใช้แท็ก img ที่แตกต่างกันตามความกว้างของอุปกรณ์ / หน้าจอ แนวคิดทั่วไปคือแม่แบบหน้า Landing Page จะถูกใช้หลายครั้งกับรูปภาพผลิตภัณฑ์ที่แตกต่างกันดังนั้นฉันต้องแน่ใจว่าฉันพัฒนาวิธีนี้ให้ดีที่สุด

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

แทนที่จะใช้background-imageคุณสามารถใช้imgโดยตรงและเพื่อให้ภาพกระจายความกว้างทั้งหมดของวิวพอร์ตให้ลองใช้max-width:100%;และโปรดจำไว้ว่าอย่าใช้ช่องว่างภายในหรือระยะขอบใด ๆ กับ div คอนเทนเนอร์หลักของคุณเนื่องจากจะเพิ่มความกว้างทั้งหมดของคอนเทนเนอร์ เมื่อใช้กฎนี้คุณสามารถมีความกว้างของรูปภาพเท่ากับความกว้างของเบราว์เซอร์และความสูงก็จะเปลี่ยนไปตามอัตราส่วน ขอบคุณ.

แก้ไข: การเปลี่ยนภาพตามขนาดต่างๆของหน้าต่าง

$(window).resize(function(){
  var windowWidth = $(window).width();
  var imgSrc = $('#image');
  if(windowWidth <= 400){			
    imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
  }
  else if(windowWidth > 400){
    imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
  <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt=""/>
</div>

ด้วยวิธีนี้คุณจะเปลี่ยนรูปภาพของคุณในขนาดที่แตกต่างกันของเบราว์เซอร์

Tim S. เข้าใกล้คำตอบที่ "ถูกต้อง" มากกว่าคำตอบที่ยอมรับในปัจจุบัน หากคุณต้องการให้ภาพพื้นหลังมีความกว้าง 100% ความสูงตัวแปรที่ทำด้วย CSS แทนที่จะใช้cover(ซึ่งจะช่วยให้ภาพขยายออกจากด้านข้าง) หรือcontain(ซึ่งไม่อนุญาตให้ขยายภาพออกไปเลย) เพียง ตั้งค่า CSS ดังนี้:

body {
    background-image: url(img.jpg);
    background-position: center top;
    background-size: 100% auto;
}

การดำเนินการนี้จะตั้งค่าภาพพื้นหลังของคุณให้มีความกว้าง 100% และปล่อยให้ความสูงล้น ตอนนี้คุณสามารถใช้แบบสอบถามสื่อเพื่อสลับภาพนั้นแทนการใช้ JavaScript

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

หวังว่าเร็ว ๆ นี้คุณจะสามารถใช้แอตทริบิวต์srcsetใหม่กับimgองค์ประกอบได้ หากคุณต้องการใช้imgองค์ประกอบตอนนี้คำตอบที่ยอมรับในปัจจุบันน่าจะดีที่สุด

อย่างไรก็ตามคุณสามารถสร้างองค์ประกอบภาพพื้นหลังที่ตอบสนองด้วยอัตราส่วนภาพคงที่โดยใช้ CSS ล้วนๆ ในการดำเนินการนี้ให้คุณตั้งค่าเป็นheight0 และตั้งค่าpadding-bottomเป็นเปอร์เซ็นต์ของความกว้างขององค์ประกอบดังต่อไปนี้:

.foo {
    height: 0;
    padding: 0; /* remove any pre-existing padding, just in case */
    padding-bottom: 75%; /* for a 4:3 aspect ratio */
    background-image: url(foo.png);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

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

ลองทำตามนี้

html { 
  background: url(image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
}

รุ่นที่เรียบง่าย

html {
  background: url(image.jpg) center center / cover no-repeat fixed;
}

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

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

body {
    background-image: url(image.jpg); /* image */
    background-position: center;      /* center the image */
    background-size: cover;           /* cover the entire window */
}

เพียงใช้ภาพพื้นหลังสองสี:

<div style="width:100%; background:url('images/bkgmid.png');
       background-size: cover;">
content
</div>

เพิ่ม css:

   html,body{
        height:100%;
        }
    .bg-img {
        background: url(image.jpg) no-repeat center top; 
        background-size: cover; 
        height:100%;     
    }

และ html คือ:

<div class="bg-mg"></div>

CSS: การยืดภาพพื้นหลังให้มีความกว้างและความสูง 100% ของหน้าจอ?

มันเป็นปี 2017 และตอนนี้คุณสามารถใช้วัตถุพอดีซึ่งมีการสนับสนุนที่ดี ทำงานในลักษณะเดียวกับ div background-sizeแต่อยู่ในองค์ประกอบและองค์ประกอบใด ๆ รวมถึงรูปภาพ

.your-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

html{
    height:100%;
    }
.bg-img {
    background: url(image.jpg) no-repeat center top; 
    background-size: cover; 
    height:100vh;     
}