Trong hình ảnh thứ hai, có vẻ như bạn muốn hình ảnh lấp đầy hộp, nhưng ví dụ bạn đã tạo KHÔNG giữ nguyên tỷ lệ khung hình (vật nuôi trông bình thường, không mảnh mai hay béo).
Tôi không có manh mối nào nếu bạn chụp ảnh những hình ảnh đó làm ví dụ hay ví dụ thứ hai là "nó nên như thế nào" (bạn nói IS, trong khi ví dụ đầu tiên bạn nói "nên")
Dù sao, tôi phải giả định:
Nếu "hình ảnh không được thay đổi kích thước vẫn giữ nguyên tỷ lệ khung hình" và bạn cho tôi xem một hình ảnh KHÔNG giữ nguyên tỷ lệ khung hình của pixel, tôi phải cho rằng bạn đang cố gắng hoàn thành tỷ lệ khung hình của vùng "cắt xén" (bên trong của màu xanh lá cây) WILE giữ tỷ lệ co của pixel. Tức là bạn muốn lấp đầy ô bằng hình ảnh, bằng cách phóng to và cắt hình ảnh.
Nếu đó là vấn đề của bạn, mã bạn cung cấp KHÔNG phản ánh "vấn đề của bạn" mà là ví dụ bắt đầu của bạn.
Với hai giả định trước, những gì bạn cần không thể hoàn thành với hình ảnh thực tế nếu chiều cao của hộp là động, nhưng với hình nền. Bằng cách sử dụng "background-size: chứa" hoặc các kỹ thuật này (đệm thông minh theo phần trăm giới hạn việc cắt xén hoặc kích thước tối đa ở bất kỳ đâu bạn muốn):
http://fofwebdesign.co.uk/template/_testing/scale-img/scale- img.htm
Cách duy nhất có thể thực hiện được điều này với hình ảnh là nếu chúng tôi QUÊN về hình ảnh thứ hai của bạn và các ô có chiều cao cố định, và FORTUNATELY, đánh giá theo hình ảnh mẫu của bạn, chiều cao vẫn giữ nguyên!
Vì vậy, nếu chiều cao của vùng chứa của bạn không thay đổi và bạn muốn giữ cho hình ảnh của mình hình vuông, bạn chỉ cần đặt chiều cao tối đa của hình ảnh thành giá trị đã biết đó (trừ phần đệm hoặc đường viền, tùy thuộc vào thuộc tính kích thước hộp của ô)
Như thế này:
<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>
Và 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/
Mã của bạn không hợp lệ (các thẻ mở thay vì thẻ đóng, vì vậy chúng xuất ra các ô NESTED, không phải các thẻ anh chị em, anh ấy đã sử dụng NHIỀU HÌNH ẢNH của bạn bên trong mã bị lỗi và hộp flex không giữ các ô mà cả hai ví dụ trong một cột ( bạn thiết lập "hàng" nhưng mã bị hỏng lồng một ô bên trong ô kia dẫn đến một ô bên trong một ô uốn, cuối cùng hoạt động dưới dạng COLUMNS. Tôi không biết bạn muốn hoàn thành điều gì và bạn đã nghĩ ra mã đó như thế nào, nhưng tôi ' m đoán những gì bạn muốn là này.
Tôi cũng đã thêm display: flex vào các ô, vì vậy hình ảnh được căn giữa (tôi nghĩ display: tablecũng có thể được sử dụng ở đây với tất cả các đánh dấu này)
