รักษาความสูงของภาพพื้นหลังให้เต็มความสูงขณะครอบตัดเฉพาะด้านข้างเพื่อรักษาอัตราส่วน

ฉันมีเพจบนมือถือที่มีภาพพื้นหลังแบบเต็มหน้าจอ

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

ฉันลองใช้เทคนิค CSS นี้ โพสต์ :

  html { 
  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;
  }

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

ขอบคุณ! ยานิฟ


mobile html css responsive-design
person Yaniv Efraim    schedule 06.11.2013    source แหล่งที่มา

คำตอบ (1)


arrow_upward
3
arrow_downward

สิ่งนี้ได้ผลสำหรับฉัน โดยขึ้นอยู่กับรูปภาพที่มีขนาดใหญ่พอที่จะครอบคลุมขนาดหน้าจอขนาดใหญ่...

 html { 
  background: url(http://lolcat.com/images/lolcats/1338.jpg) no-repeat center center fixed; 
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
  }

Jsfiddle ที่นี่

person Matt Maclennan    schedule 06.11.2013
comment
มันใช้งานได้แล้ว tnx! สิ่งเดียวที่ขาดหายไปคือ: background-size: cover; เพื่อทำให้มันได้ผล - person Yaniv Efraim; 06.11.2013