เหตุใด flexbox จึงยืดภาพของฉันแทนที่จะรักษาอัตราส่วนไว้

156

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

div {
  display: flex; 
  flex-wrap: wrap;
}
img{ 
  width: 50%
}

<div>
    <img src="https://loremflickr.com/400/300" >
    <h4>Appify</h4>
    <p> some text </p>
</div>

ขยายตัวอย่างข้อมูล

อะไรทำให้เกิดสิ่งนี้

ฉันเพิ่มCodePen นี้เพื่อแสดงว่าฉันหมายถึงอะไร

html css flexbox

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

5

ใน Firefox และ IE ทำงานได้ดี ใน Chrome คุณสามารถแก้ไขด้วยalign-self:flex-start ในภาพ ฉันไม่รู้ว่าทำไมบางทีค่าเริ่มต้นใน chrome ยืดออก

2

เพิ่มความสูงด้วย: 100%; ไปที่ img เพื่อแก้ไขปัญหาฉันต้องการทราบว่าเพราะเหตุใดภาพจึงยืดออกเช่นกัน

— Paran0a

3

@blonfu ค่าเริ่มต้นในเบราว์เซอร์ทั้งหมด/align-items: stretch align-self: stretchหากคุณเพิ่มเส้นขอบรอบ ๆ แต่ละรายการและนำออกwrapคุณจะสังเกตเห็นรายการทั้งหมดที่ยืดออกในเบราว์เซอร์ทั้งหมด: codepen.io/anon/pen/oLXBVx?editors=1100

— Michael Benjamin

ตกลงฉันเรียนรู้สิ่งนี้ แต่ด้วยภาพที่ทำงานแตกต่างกันไปใน Chrome และเบราว์เซอร์อื่น ๆ Chrome ไม่เคารพอัตราส่วนกว้างยาวหากคุณไม่ได้กำหนดความสูง

@ blonfu ใช่ ไม่มีคำถามว่ามีความไม่สอดคล้องกันของเบราว์เซอร์และระดับละเอียดมากขึ้น

— Michael Benjamin

365

มันเป็นเพราะการยืดค่าเริ่มต้นคือalign-self stretchตั้งค่าการalign-selfcenter

align-self: center;

ดูเอกสารที่นี่: จัดตำแหน่งตัวเอง

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

ใช่ แต่เบราว์เซอร์อื่น ๆ นั้นมีอัตราส่วนภาพในภาพ Chrome หรือใช้แบบยืดหยุ่นใน img

9

ฉันคิดว่าalign-self: start;อาจเป็นคำตอบที่ดีกว่าเนื่องจากรูปภาพควรจัดแนวแนวตั้งไว้ที่ด้านบนของภาชนะบรรจุ (ไม่ใช่กึ่งกลาง) เหมือนกับภาพที่ไม่มีสไตล์ (ไม่มี css) ไม่ว่าจะด้วยวิธีใดคำตอบทั้งคู่จะช่วยยืดกล้ามเนื้อ ดังนั้นขึ้นอยู่กับสิ่งที่ OP ต้องการแน่นอน - เพียงแค่ไม่ได้รับความประทับใจแบบ 'กึ่งกลางแนวตั้ง' จากโพสต์ของ OP

— คางคก

หากคุณไม่ได้กำหนดความกว้างของภาพและอยู่ในคอนเทนเนอร์แบบยืดหยุ่นมันจะยืดได้ถึง 100% align-self: [flex-start, center...others]จะป้องกันภาพไม่ให้ถ่ายภาพได้ 100% ของความกว้างของเฟล็กซ์คอนเทนเนอร์ align-self:centerแก้ไขมันแน่นอน แต่ถ้าคุณต้องการให้ภาพของคุณเริ่มต้นจากจุดเริ่มต้นหรือจุดสิ้นสุดของการใช้คอนเทนเนอร์align-items: flex-start or flex-end

— cacoder

1

คุณยังสามารถใส่align-items: center(หรือการจัดตำแหน่งอะไรก็ได้ที่เหมาะกับความต้องการของคุณ) บนพาเรนต์

— electrovir

16

คุณลักษณะที่สำคัญคือalign-self: center:

.container {
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
}

img.align-self {
  align-self: center;
}

<div class="container">
    <p>Without align-self:</p>
    <img src="http://i.imgur.com/NFBYJ3hs.jpg" />
    <p>With align-self:</p>
    <img class="align-self" src="http://i.imgur.com/NFBYJ3hs.jpg" />
</div>

ขยายตัวอย่างข้อมูล

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

1

ฉันประสบปัญหาเดียวกันกับเมนูพื้นฐาน align-self: center;ไม่ได้ผลสำหรับฉัน

ทางออกของฉันคือการห่อภาพด้วย <div style="display: inline-table;">...</div>

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

2

มันเกี่ยวกับ flexbox

นี่คือทางออกสำหรับ flexbox รูปภาพและ div อยู่ในคอนเทนเนอร์ flexbox

— isapir

0

เพิ่ม `margin`เพื่อจัดแนวรูปภาพ:

เนื่องจากเราต้องการที่imageจะเป็นleft-alignedเราเพิ่ม:

img {
  margin-right: auto;
}

ในทำนองเดียวกันสำหรับการimageที่จะright-alignedทำให้เราสามารถเพิ่มmargin-right: auto;ทำให้เราสามารถเพิ่มตัวอย่างแสดงการสาธิตสำหรับการจัดแนวทั้งสองประเภท

โชคดี...

div {
  display:flex; 
  flex-direction:column;
  border: 2px black solid;
}

h1 {
  text-align: center;
}
hr {
  border: 1px black solid;
  width: 100%
}
img.one {
  margin-right: auto;
}

img.two {
  margin-left: auto;
}

<div>
  <h1>Flex Box</h1>
  
  <hr />
  
  <img src="https://via.placeholder.com/80x80" class="one" 
  />
  
  
  <img src="https://via.placeholder.com/80x80" class="two" 
  />
  
  <hr />
</div>

ขยายตัวอย่างข้อมูล

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

0

มันยืดเพราะค่าเริ่มต้นจัดตำแหน่งตนเองยืด มีวิธีแก้ปัญหาสองกรณีสำหรับกรณีนี้: 1. ตั้งค่า img การจัดแนวตัวเอง: กึ่งกลางหรือ 2. ตั้งค่าการจัดแนวรายการหลัก: กึ่งกลาง

img {

   จัดตำแหน่งตัวเอง: ศูนย์
}

หรือ

.parent {
  align-items: center
}

— mohamed ali
แหล่งที่มา

เหตุใด flexbox จึงยืดภาพของฉันแทนที่จะรักษาอัตราส่วนไว้

เพิ่ม marginเพื่อจัดแนวรูปภาพ:

เพิ่ม `margin`เพื่อจัดแนวรูปภาพ: