เมื่อใช้โมเดล CSS flex box ฉันจะบังคับให้รูปภาพคงอัตราส่วนได้อย่างไร

JS Fiddle: http://jsfiddle.net/xLc2Le0k/2/

สังเกตว่ารูปภาพยืดหรือหดเพื่อให้เต็มความกว้างของคอนเทนเนอร์ ไม่เป็นไร แต่เราสามารถยืดหรือหดความสูงเพื่อรักษาสัดส่วนของภาพได้หรือไม่?

HTML

<div class="slider">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
    <img src="http://www.placebacon.net/400/300" alt="Bacn">
</div>

CSS

.slider {
    display: flex;
}
.slider img {
    margin: 0 5px;
}

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

ใช้ข้อเท็จจริงนี้หากคุณรวมแท็ก img แต่ละแท็กลงในแท็ก div และตั้งค่าความกว้างเป็น 100% ของ div ระดับบนสุดความสูงจะเป็นไปตามอัตราส่วนตามที่คุณต้องการ

http://jsfiddle.net/0o5tpbxg/

* {
    margin: 0;
    padding: 0;
}
.slider {
    display: flex;
}
.slider .slide img {
    width: 100%;
}

เพื่อป้องกันไม่ให้ภาพยืดในแกนใดแกนหนึ่งภายในแม่แบบยืดหยุ่นฉันได้พบวิธีแก้ปัญหาสองสามวิธี

คุณสามารถลองใช้วัตถุที่พอดีกับภาพซึ่งเช่น

object-fit: contain;

http://jsfiddle.net/ykw3sfjd/

หรือคุณสามารถเพิ่มกฎ flex-specfic ซึ่งอาจทำงานได้ดีกว่าในบางกรณี

align-self: center;
flex: 0 0 auto;

ไม่จำเป็นต้องเพิ่ม div ที่มี

ค่าเริ่มต้นสำหรับคุณสมบัติ css "align-items" คือ "stretch" ซึ่งเป็นสาเหตุที่ทำให้รูปภาพของคุณถูกยืดจนเต็มความสูงดั้งเดิม การตั้งค่าคุณสมบัติ css "align-items" เป็น "flex-start" จะช่วยแก้ปัญหาของคุณได้

.slider {
    display: flex;
    align-items: flex-start;  /* ADD THIS! */
}

ภาพส่วนใหญ่ที่มีขนาดที่แท้จริงซึ่งมีขนาดตามธรรมชาติเช่นเดียวกับjpegภาพ ถ้าขนาดที่ระบุกำหนดหนึ่งของทั้งกว้างและความสูงที่ค่าที่หายไปจะถูกกำหนดโดยใช้อัตราส่วนที่แท้จริง ... - ดูMDN

แต่นั่นไม่ได้ผลตามที่คาดไว้หากรูปภาพที่ถูกตั้งค่าเป็นรายการที่ยืดหยุ่นโดยตรงด้วยโมดูลเลย์เอาต์กล่องยืดหยุ่นระดับ 1ในปัจจุบันเท่าที่ฉันรู้

ดูการอภิปรายและรายงานข้อบกพร่องเหล่านี้อาจเกี่ยวข้อง:

• Flexbugs # 14 - Chrome / Flexbox Intrinsic Sizing ไม่ได้ใช้อย่างถูกต้อง
• Firefox Bug 972595 - คอนเทนเนอร์แบบยืดหยุ่นควรใช้ "flex-Basis" แทน "width" สำหรับการคำนวณความกว้างภายในของรายการที่ยืดหยุ่น
• Chromium Issue 249112 - ใน Flexbox อนุญาตให้ใช้อัตราส่วนภายในเพื่อแจ้งการคำนวณขนาดหลัก

วิธีแก้ปัญหาเบื้องต้นคุณสามารถ<img>ใช้ a <div>หรือ a <span>หรือมากกว่านั้นก็ได้

jsFiddle

.slider {
  display: flex;
}

.slider>div {
  min-width: 0; /* why? see below. */
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

4.5 ขนาดของรายการ Flex ขั้นต่ำโดยนัย

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

หรือคุณสามารถใช้tableเลย์เอาต์CSS แทนซึ่งคุณจะได้ผลลัพธ์ที่คล้ายกันเนื่องจากflexboxมันจะทำงานบนเบราว์เซอร์อื่น ๆ แม้กระทั่งสำหรับ IE8

jsFiddle

.slider {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.slider>div {
  display: table-cell;
  vertical-align: top;
}

.slider>div>img {
  max-width: 100%;
  height: auto;
}

<div class="slider">
  <div><img src="https://picsum.photos/400/300?image=0" /></div>
  <div><img src="https://picsum.photos/400/300?image=1" /></div>
  <div><img src="https://picsum.photos/400/300?image=2" /></div>
  <div><img src="https://picsum.photos/400/300?image=3" /></div>
</div>

เมื่อเร็ว ๆ นี้ฉันเล่นกับ flexbox และฉันได้หาวิธีแก้ปัญหานี้ผ่านการทดลองและเหตุผลต่อไปนี้ อย่างไรก็ตามในความเป็นจริงฉันไม่แน่ใจว่านี่คือสิ่งที่เกิดขึ้นหรือไม่

หากความกว้างจริงได้รับผลกระทบจากระบบเฟล็กซ์ ดังนั้นหลังจากความกว้างขององค์ประกอบถึงความกว้างสูงสุดของพาเรนต์แล้วความกว้างพิเศษที่กำหนดใน css จะถูกละเว้น จากนั้นจึงปลอดภัยที่จะตั้งค่าความกว้างเป็น 100%

เนื่องจากความสูงของแท็ก img นั้นมาจากรูปภาพเองดังนั้นการตั้งค่าความสูงเป็น 0% จึงสามารถทำอะไรบางอย่างได้ (นี่คือจุดที่ฉันไม่ชัดเจนว่าเป็นอะไร ... แต่มันก็สมเหตุสมผลสำหรับฉันที่ควรแก้ไข)

การสาธิต

(จำได้ว่าเห็นที่นี่ครั้งแรก!)

.slider {
    display: flex;
}
.slider img {
    height: 0%;
    width: 100%;
    margin: 0 5px;
}

ใช้งานได้เฉพาะใน Chrome เท่านั้น

คาดว่าพฤติกรรมนี้ ภาชนะดิ้นจะยืดลูกทั้งหมดโดยปริยาย รูปภาพไม่มีข้อยกเว้น (กล่าวคือผู้ปกครองจะมีalign-items: stretchทรัพย์สิน)

ในการรักษาอัตราส่วนเรามีสองวิธี:

1. แทนที่align-items: stretchคุณสมบัติเริ่มต้นเป็นalign-items: flex-startหรือalign-self: centerอื่น ๆ http://jsfiddle.net/e394Lqnt/3/

หรือ

2. ตั้งค่าคุณสมบัติการจัดแนวเฉพาะสำหรับเด็กเอง: เช่นalign-self: centerหรือalign-self: flex-startอื่น ๆ http://jsfiddle.net/e394Lqnt/2/

อันที่จริงฉันพบว่าคอนเทนเนอร์ของแท็กรูปภาพต้องมีความสูงเพื่อที่จะรักษาอัตราส่วนของรูปภาพไว้ ตัวอย่างเช่น>

.container{display:flex; height:100%;} img{width:100%;height:auto;}

จากนั้นใน html คอนเทนเนอร์ของคุณจะห่อภาพแท็ก

<div class="container"><img src="image.jpg" alt="image" /></div>

งานนี้สำหรับ IE และเบราว์เซอร์อื่น ๆ

ฉันเพิ่งมีปัญหาเดียวกัน ใช้การจัดแนวแบบยืดหยุ่นเพื่อจัดองค์ประกอบของคุณให้อยู่กึ่งกลาง คุณจำเป็นต้องใช้align-items: centerแทนalign-content: center. การดำเนินการนี้จะรักษาอัตราส่วนภาพไว้ในขณะที่การจัดแนวเนื้อหาจะไม่คงอัตราส่วนไว้