ภาพพื้นหลัง css ที่ตอบสนอง


197

ฉันมีเว็บไซต์ (g-floors.eu) และฉันต้องการสร้างพื้นหลัง (ใน css ฉันได้กำหนด bg-image สำหรับเนื้อหา) เช่นกัน น่าเสียดายที่ฉันไม่มีความคิดเกี่ยวกับวิธีการทำสิ่งนี้ยกเว้นสิ่งหนึ่งที่ฉันสามารถคิดได้ แต่มันก็เป็นวิธีแก้ปัญหา การสร้างภาพหลายภาพจากนั้นใช้ขนาดหน้าจอ css เพื่อเปลี่ยนภาพ แต่ฉันอยากรู้ว่ามีวิธีการปฏิบัติมากขึ้นเพื่อให้บรรลุนี้

โดยทั่วไปสิ่งที่ฉันต้องการบรรลุคือภาพ (พร้อมลายน้ำ 'G') จะปรับขนาดโดยอัตโนมัติโดยไม่แสดงภาพน้อยลง ถ้าเป็นไปได้แน่นอน

ลิงก์: g-floors.eu

รหัสที่ฉันมีจนถึงตอนนี้ (ส่วนเนื้อหา)

#content {
  background-image: url('../images/bg.png');
  background-repeat: no-repeat;
  position: relative;
  width: 85%;
  height: 610px;
  margin-left: auto;
  margin-right: auto;
}

7
ลองดูที่ลิงค์นี้อาจเป็นสิ่งที่คุณกำลังมองหา? css-tricks.com/perfect-full-page-background-image
Christofer Vilander

ฉันรู้สึกว่าโซลูชันนี้ที่ Christofer Vilander โพสต์เป็นทางออกที่ดีกว่าคำตอบที่เลือก
CU3ED

แค่สงสัยว่าทำไมเว็บไซต์ไม่ใช้คุณสมบัติการปรับขนาดนี้ตามที่คุณถามเมื่อเดือนกุมภาพันธ์ 2015 มีปัญหากับมันบ้างไหม?
LegendLength

คำตอบ:


371

หากคุณต้องการภาพขนาดเดียวกันตามขนาดของหน้าต่างเบราว์เซอร์:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

อย่าตั้งค่าความกว้างความสูงหรือระยะขอบ

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


3
เป็นไปได้ไหมที่จะปรับขนาดความกว้างโดยอัตโนมัติและปล่อยให้ความสูงคงที่
jochemke

3
ใช่คุณสามารถกำหนดความสูงของภาพเป็นพิกเซลและความกว้างเป็นร้อยละ แต่ภาพจะถูกทำลาย มันจะไม่ดูดี
Andrei Volgin

2
คุณสามารถใช้ภาพขนาดเล็กกว่านี้ได้หากคุณใช้รูปแบบเวกเตอร์: en.m.wikipedia.org/wiki/Scalable_Vector_Graphics
Andrei Volgin

9
อะไร? ไม่ได้ตั้งค่าความกว้างความสูงของคอนเทนเนอร์จะไม่แสดงภาพเลย
หิมะ

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

70

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

background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;

ที่ขนาดหน้าจอ 800x1280px ภาพจะถูกตัดออกทางด้านขวาโดยกล่อง ขนาดอื่น ๆ ทั้งหมดดูดี
Mugé

52

ลองสิ่งนี้:

background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;

33

CSS:

background-size: 100%;

นั่นควรทำเคล็ดลับ! :)


27
สิ่งนี้จะบิดเบือนภาพทั้งหมดตามอัตราส่วนของหน้าต่างเบราว์เซอร์ ไม่เคยทำมัน
Andrei Volgin

8
สำหรับการอ้างอิงในอนาคตจริง ๆ แล้วมันจะไม่ดูแย่ด้วยวิธีนี้ ขนาดพื้นหลัง: 100% 100% จะได้ แต่การประกาศเพียง x ที่ 100% ทำให้มันดูแย่มาก กรณีทดสอบ: codepen.io/howlermiller/pen/syduB
Timothy Miller

1
มันจะไม่ดู "ผิดเพี้ยน" แต่มันจะขยายภาพเกินขนาดที่ตั้งใจไว้ถ้ามันเล็กกว่าที่บรรจุ ...
รหัสใหม่เริ่ม

1
ดังนั้นคำตอบที่ได้รับการยอมรับจะ OP ไม่ได้ถามเกี่ยวกับปัญหานั้นเพียงว่าเป็นไปได้หรือไม่ที่จะทำให้มีขนาดที่ดี
Timothy Miller

1
วิธีนี้แก้ไขปัญหาของฉันได้ +1
JPeG

22

นี่คือ sass mixin สำหรับภาพพื้นหลังที่ตอบสนองต่อสิ่งที่ฉันใช้ มันใช้ได้กับทุกblockองค์ประกอบ แน่นอนเดียวกันสามารถทำงานใน CSS ธรรมดาคุณจะต้องคำนวณpaddingด้วยตนเอง

@mixin responsive-bg-image($image-width, $image-height) {
  background-size: 100%;
  height: 0;
  padding-bottom: percentage($image-height / $image-width);
  display: block;
}


.my-element {
  background: url("images/my-image.png") no-repeat;

  // substitute for your image dimensions
  @include responsive-bg-image(204, 81);
}

ตัวอย่างhttp://jsfiddle.net/XbEdW/1/


รหัสในซอ (ใช้เฟรมเวิร์ก) แตกต่างจากโค้ดในคำตอบ
หิมะ


13

นี่คือวิธีที่ดีที่สุดที่ฉันได้รับ

#content   {
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-size:cover;
}

ตรวจสอบw3schools

ตัวเลือกเพิ่มเติมที่มี

background-size: auto|length|cover|contain|initial|inherit;

9

ฉันใช้

#content {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center top;
}

ซึ่งทำงานได้ดีจริงๆ


นั่นคือรหัสที่ฉันต้องการ! ขอบคุณ :)) ฉันพยายามทำ parallax ที่หน้าจอ 100% แต่สูง 200px และฉันต้องการเฉพาะส่วนบนสุดของพื้นหลัง แต่ยังคงรักษาสัดส่วนของภาพทั้งหมด
thinklinux

8
#container {
    background-image: url("../images/layout/bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    margin: 3px auto 0;
    position: relative;
}

6

เว็บไซต์ที่ตอบสนองโดยเพิ่มช่องว่างภายในความสูง / ความกว้างของภาพด้านล่าง x 100 = ช่องว่างด้านล่าง%:

http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/


วิธีการที่ซับซ้อนมากขึ้น:

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios


พยายามปรับขนาดพื้นหลัง eq Firefox Ctrl + M เพื่อดูสคริปต์ที่สวยงามฉันคิดว่าดีที่สุด:

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content


4

คุณสามารถใช้สิ่งนี้ ฉันได้ทดสอบและใช้งานได้ถูกต้อง 100%:

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;

คุณสามารถทดสอบเว็บไซต์ของคุณด้วยการตอบสนองที่จำลองขนาดหน้าจอนี้: http://www.infobyip.com/testwebsiteresolution.php

ล้างแคชของคุณทุกครั้งที่คุณทำการเปลี่ยนแปลงและฉันต้องการใช้ Firefox เพื่อทดสอบ

ถ้าคุณต้องการที่จะใช้รูปแบบเว็บไซต์อื่น ๆ / URL และไม่ชอบ: background-image:url('../images/bg.png'); // โครงสร้างนี้คือการใช้ภาพจากเซิร์ฟเวอร์ที่โฮสต์ของคุณเอง จากนั้นใช้ดังนี้: background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

สนุก :)


4

หากคุณต้องการให้ภาพทั้งหมดแสดงโดยไม่คำนึงถึงอัตราส่วนภาพลองสิ่งนี้:

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;

นี่จะแสดงภาพทั้งหมดไม่ว่าหน้าจอจะมีขนาดเท่าใด


3
    <style> 
         * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#res_img {
  background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg");
  width: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  border: 1px solid red;
}

@media screen and (min-width:300px) and (max-width:500px) {
  #res_img {
    width: 100%;
    height: 200px;
  }
}

    </style>

<div id="res_img">
</div>


2

ปรับให้เข้ากับอัตราส่วนกำลังสองด้วย jQuery

var Height = $(window).height();
var Width = $(window).width();
var HW = Width/Height;

if(HW<1){
      $(".background").css("background-size","auto 100%");
    }
    else if(HW>1){
      $(".background").css("background-size","100% auto");
    }


0

ฉันคิดว่าวิธีที่ดีที่สุดที่จะทำคือ:

body {
    font-family: Arial,Verdana,sans-serif;
    background:url("/images/image.jpg") no-repeat fixed bottom right transparent;
}

ด้วยวิธีนี้ไม่จำเป็นต้องทำอะไรมากและมันค่อนข้างง่าย

อย่างน้อยมันก็ใช้ได้กับฉัน

ฉันหวังว่ามันจะช่วย


0

ลองใช้background-sizeแต่ใช้สองชิ้นสำหรับความกว้างและอีกอันหนึ่งสำหรับความสูง

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width 
// and the second will be the height.
background-position:center;

0
background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

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

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.