ปรับขนาดภาพอัตโนมัติใน CSS FlexBox Layout และรักษา Aspect Ratio?

ฉันใช้เค้าโครงกล่องดิ้น CSS ซึ่งปรากฏดังที่แสดงด้านล่าง:

หากหน้าจอเล็กลงจะเปลี่ยนเป็น:

ปัญหาคือรูปภาพไม่ได้ถูกปรับขนาดโดยคงสัดส่วนภาพจากภาพต้นฉบับ

เป็นไปได้ไหมที่จะใช้ CSS บริสุทธิ์และเค้าโครงกล่องดิ้นเพื่อให้ภาพถูกปรับขนาดหากหน้าจอเล็กลง

นี่คือ html ของฉัน:

<div class="content">
  <div class="row"> 
    <div class="cell">
      <img src="http://i.imgur.com/OUla6mK.jpg"/>
    </div>
    <div class="cell">
      <img src="http://i.imgur.com/M16WzMd.jpg"/>
    </div>
  </div>
</div>

CSS ของฉัน:

.content {
    background-color: yellow;    
}

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

    background-color: red;

}

.cell {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto; 

    padding: 10px;
    margin: 10px;

    background-color: green;
    border: 1px solid red;
    text-align: center;

}

img {max-width:100%;}เป็นวิธีหนึ่งในการทำเช่นนี้ เพียงเพิ่มลงในโค้ด CSS ของคุณ

http://jsfiddle.net/89dtxt6s/

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

.myFlexedImage {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

คุณอาจต้องการลองใช้คุณสมบัติ CSS3 ใหม่และเรียบง่าย:

img { 
  object-fit: contain;
}

มันรักษาอัตราส่วนภาพ (เช่นเดียวกับเมื่อคุณใช้เคล็ดลับภาพพื้นหลัง) และในกรณีของฉันก็ใช้ได้ดีกับปัญหาเดียวกัน

โปรดระวัง IE ไม่รองรับ (ดูรายละเอียดการสนับสนุนที่นี่ )

ฉันขอแนะนำให้ดูbackground-sizeตัวเลือกในการปรับขนาดภาพ

แทนที่จะมีภาพในเพจหากคุณตั้งค่าเป็นภาพพื้นหลังคุณสามารถตั้งค่าได้ดังนี้

background-size: contain

หรือ

background-size: cover

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

ในภาพที่สองดูเหมือนว่าคุณต้องการให้รูปภาพเต็มช่อง แต่ตัวอย่างที่คุณสร้างขึ้นนั้นยังคงรักษาอัตราส่วนไว้ (สัตว์เลี้ยงดูปกติไม่ผอมหรืออ้วน)

ฉันไม่รู้ว่าถ้าคุณ photoshopped ภาพเหล่านั้นเป็นตัวอย่างหรือภาพที่สองคือ "ควรจะเป็นอย่างไร" เช่นกัน (คุณบอกว่า IS ในขณะที่ตัวอย่างแรกคุณบอกว่า "ควร")

อย่างไรก็ตามฉันต้องถือว่า:

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

หากนั่นเป็นปัญหาของคุณรหัสที่คุณระบุไม่ได้แสดงถึง "ปัญหาของคุณ" แต่เป็นตัวอย่างเริ่มต้นของคุณ

จากสมมติฐานสองข้อก่อนหน้านี้สิ่งที่คุณต้องการไม่สามารถทำได้ด้วยภาพจริงหากความสูงของกล่องเป็นแบบไดนามิก แต่มีภาพพื้นหลัง ไม่ว่าจะโดยใช้ "background-size: contain" หรือเทคนิคเหล่านี้ (สมาร์ทแพดดิ้งเป็นเปอร์เซ็นต์ที่ จำกัด การครอบตัดหรือขนาดสูงสุดที่ใดก็ได้ที่คุณต้องการ): http://fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm

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

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

แบบนี้:

<div class="content">
  <div class="row">    
      <div class="cell">    
          <img src="http://lorempixel.com/output/people-q-c-320-320-2.jpg"/>
      </div>
      <div class="cell">    
          <img src="http://lorempixel.com/output/people-q-c-320-320-7.jpg"/>
      </div>
    </div>
</div>

และ CSS:

.content {
    background-color: green;
}

.row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

}

.cell {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px;
    border: solid 10px red;
    text-align: center;
    height: 300px;
    display: flex;
    align-items: center;
    box-sizing: content-box;
}
img {
    margin: auto;
    width: 100%;
    max-width: 300px;
    max-height:100%
}

http://jsfiddle.net/z25heocL/

รหัสของคุณไม่ถูกต้อง (แท็กเปิดแทนที่จะเป็นแท็กปิดดังนั้นจึงส่งออกเซลล์ NESTED ไม่ใช่พี่น้องเขาใช้ภาพหน้าจอของคุณภายในรหัสที่ผิดพลาดและกล่องดิ้นไม่ได้ถือเซลล์ แต่ทั้งสองตัวอย่างในคอลัมน์ ( คุณตั้งค่า "row" แต่รหัสที่เสียหายที่ซ้อนอยู่ในเซลล์หนึ่งภายในอีกเซลล์หนึ่งส่งผลให้เกิด flex ภายใน flex ในที่สุดก็ทำงานเป็น COLUMNS ฉันไม่รู้ว่าคุณต้องการทำอะไรและคุณสร้างโค้ดนั้นขึ้นมาได้อย่างไร แต่ฉัน ' m เดาว่าสิ่งที่คุณต้องการคือสิ่งนี้

ฉันเพิ่มการแสดงผล: โค้งงอให้กับเซลล์ด้วยดังนั้นภาพจึงอยู่ตรงกลาง (ฉันคิดว่าน่าdisplay: tableจะถูกใช้ที่นี่เช่นกันกับมาร์กอัปทั้งหมดนี้)

HTML:

<div class="container">
    <div class="box">
        <img src="http://lorempixel.com/1600/1200/" alt="">
    </div>
</div>

CSS:

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;

  width: 100%;
  height: 100%;

  border-radius: 4px;
  background-color: hsl(0, 0%, 96%);
}

.box {
  border-radius: 4px;
  display: flex;
}

.box img {
  width: 100%;
  object-fit: contain;
  border-radius: 4px;
}

นั่นคือวิธีที่ฉันจะจัดการกับภาพต่างๆ (ขนาดและสัดส่วน) ในตารางที่ยืดหยุ่น

.images {
  display: flex;
  flex-wrap: wrap;
  margin: -20px;
}

.imagewrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(50% - 20px);
  height: 300px;
  margin: 10px;
}

.image {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%; /* set to 'auto' in IE11 to avoid distortions */
}

<div class="images">
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/800x600" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/1024x768" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/1000x800" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/500x800" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/800x600" />
  </div>
  <div class="imagewrapper">
    <img class="image" src="https://via.placeholder.com/1024x768" />
  </div>
</div>

ฉันใช้ jquery หรือ vw เพื่อรักษาอัตราส่วน

jquery

function setSize() {
    var $h = $('.cell').width();
    $('.your-img-class').height($h);
}
$(setSize);
$( window ).resize(setSize); 

vw

 .cell{
    width:30vw;
    height:30vw;
}
.cell img{
    width:100%;
    height:100%;
}