พอดีกับภาพพื้นหลังเพื่อ div

334

ฉันมีภาพพื้นหลังใน div ต่อไปนี้ แต่ภาพถูกตัดออก:

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

มีวิธีแสดงภาพพื้นหลังโดยไม่ตัดออกหรือไม่?

html css background-image

— Rajeev
แหล่งที่มา

ภาพใหญ่กว่าตัว div หรือไม่?

— grc

1

ใช่ภาพใหญ่กว่า div

— Rajeev

1

ภาพพื้นหลัง:: url (/media/img_1_bg.jpg); ขนาดพื้นหลัง: บรรจุ; พื้นหลังซ้ำ: ไม่มีซ้ำ;

— Waruna Manjula

672

คุณสามารถบรรลุนี้ด้วยbackground-sizeทรัพย์สินซึ่งขณะนี้ได้รับการสนับสนุนจากเบราว์เซอร์ส่วนใหญ่

วิธีปรับขนาดภาพพื้นหลังให้พอดีกับด้านในของ div:

background-size: contain;

วิธีปรับขนาดภาพพื้นหลังให้ครอบคลุม div ทั้งหมด:

background-size: cover;

ตัวอย่าง JSFiddle

นอกจากนั้นยังมีตัวกรองสำหรับ IE 5.5+ สนับสนุนเช่นเดียวกับคำนำหน้าของผู้ขายเบราว์เซอร์รุ่นเก่าบางรุ่น

— GRC
แหล่งที่มา

119

หากสิ่งที่คุณต้องการคือภาพที่มีขนาดเท่ากันของ div ฉันคิดว่านี่เป็นทางออกที่หรูหราที่สุด:

background-size: 100% 100%;

ถ้าไม่คำตอบโดย @grc เป็นคำตอบที่เหมาะสมที่สุด

ที่มา: http://www.w3schools.com/cssref/css3_pr_background-size.asp

— Sertage
แหล่งที่มา

ในที่สุดฉันก็พบวิธีแก้ปัญหาเพื่อให้ div ทั้งหมดมีพื้นหลัง ขอบคุณ!

— Kamil Rykowski

5

แต่สิ่งนี้จะยืดภาพ ... มีวิธีให้พอดีกับภาพพื้นหลังโดยไม่ยืดออกหรือไม่?

— Junaid

1

อย่างไรก็ตามอัตราส่วนภาพที่หายไป

— ผู้เรียน

@Learner หากคุณเปลี่ยนขนาดของภาพโดยไม่ต้องครอบตัดภาพอัตราส่วนจะหายไป 99% ของเวลา มันเป็นสามัญสำนึก

— Vaibhav Vishal

11

คุณสามารถใช้คุณสมบัตินี้:

background-size: contain;
background-repeat: no-repeat;

และรหัสของคุณก็เป็นเช่นนี้:

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">

— hojjat.mi
แหล่งที่มา

8

คุณใช้สิ่งนี้ด้วย:

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;

ฉันไม่รู้ค่า div ของคุณ แต่สมมุติว่าคุณมีค่าเหล่านั้น

height: auto;
max-width: 600px;

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

คริส

— คริสเตียน
แหล่งที่มา

เชื่อมโยงไปยังสูงได้รับการโหวตคำตอบที่พูดคุยเกี่ยวกับการแก้ปัญหานี้ในรายละเอียดเพิ่มเติมได้ที่: stackoverflow.com/questions/600743/...padding-topและแสดงให้เห็นวิธีการคำนวณ

— John Lee