Cài đặt ban đầu của hộp chứa flex là align-items: stretch.
Điều đó có nghĩa là các mặt hàng flex sẽ mở rộng trên cross axis của vùng chứa.
Trong vùng chứa hướng hàng, như trong câu hỏi, trục chéo là dọc.
Điều đó có nghĩa là các mục (hình ảnh, trong trường hợp này) sẽ bao phủ chiều cao đầy đủ của vùng chứa.
Tuy nhiên, khi một mục flex có kích thước chữ thập xác định, ghi đè mặc định stretch.
Từ spec:
8.3. Cross-axis Alignment: the align-items and align-self properties
mục Flex có thể được sắp xếp ở trên trục ngang của dòng hiện tại của container flex , tương tự như justify-content nhưng trong vuông góc hướng.
stretch
Nếu chéo sở hữu của mục flex kích thước tính để auto, và không phải của lề chéo trục là auto, mục flex là kéo dài.
Đây là ngôn ngữ chính:
Nếu chéo sở hữu của mục flex kích thước tính để auto
Và đây là cách spec định nghĩa "sở hữu kích thước chéo":
Chiều rộng hoặc chiều cao của mặt hàng flex, tùy theo kích thước nào trong khổ ngang , là t mặt hàng số của anh ấy là. Thuộc tính kích thước chéo là tùy theo số nào của width hoặc height có kích thước chéo.
https://www.w3.org/TR/css-flexbox-1/#cross-size-property
Vì vậy, mã của bạn dường như được chơi ra như đã định nghĩa trong spec.
Đây là những gì bạn có:
.flex-parent {
display: flex;
max-height: 10vh;
}
<div class="flex-parent">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
<img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>
Những hình ảnh đầu tiên không có chiều rộng được xác định (kích thước chính) hoặc chiều cao (kích thước chữ thập), hoặc trong CSS hoặc HTML . Do đó, kích thước chữ thập của nó tính đến auto.
Tuyên bố này:
Nếu chéo sở hữu của mục flex kích thước tính để auto
... là đúng, và align-items: stretch đi vào hiệu lực.
Hình ảnh mở rộng trên chiều cao của vùng chứa, là 10px.
Hình ảnh thứ hai, tuy nhiên, có định cỡ rõ ràng. Kích thước chéo được xác định trong HTML (height="240").
Bây giờ tuyên bố này:
Nếu chéo sở hữu của mục flex kích thước tính để auto
... là sai, và align-items: stretch được ghi đè. Thuộc tính HTML height chiếm ưu thế.
Hai lưu ý về hình ảnh thứ hai:
- Hình ảnh lờ đi
max-height hạn trên thùng vì một thiết lập ban đầu trong CSS là overflow: visible.
- HTML
width và height thuộc tính ánh xạ tới thuộc tính CSS tương ứng của chúng. Do đó, height="240" ghi đè mặc định height: auto. Xem dưới đây để tham khảo spec. *
Có hai vấn đề khác cần xem xét khi render hình ảnh trong một container flex.
Kích thước tối thiểu mặc định của các mục flex. Cài đặt này ngăn các mục flex co lại bên dưới kích thước nội dung của chúng. Đọc bài này để biết chi tiết đầy đủ:
hành vi Nhờ biển đổi giữa các trình duyệt lớn. Firefox, Chrome, Safari, Edge và IE11 không phải lúc nào cũng hiển thị hình ảnh dưới dạng các mục flex theo cùng một cách. Đọc bài này để biết thêm chi tiết:
Xem xét tất cả các yếu tố trên, đây là giải pháp đề nghị của tôi:
.flex-parent {
display: flex;
max-height: 50vh; /* adjusted for demo */
}
.flex-parent {
min-width: 0;
}
img {
width: 100%;
height: auto;
}
<div class="flex-parent">
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>
<div>
<img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>
</div>
* HTML width và height thuộc tính ánh xạ tới thuộc tính CSS tương ứng của chúng. Do đó, khi được chỉ định, chúng sẽ ghi đè các giá trị mặc định của CSS.Từ spec HTML5:
10.4.3 Attributes for embedded content and images
Các width và height thuộc tính trên applet, embed, iframe, object hoặc video yếu tố, và input yếu tố với một thuộc tính type ở bang Nút hình ảnh và đại diện cho hình ảnh hoặc người dùng dự kiến cuối cùng sẽ đại diện cho một hình ảnh, bản đồ cho các thuộc tính kích thướcwidth và height trên phần tử tương ứng.
10.2 The CSS user agent style sheet and presentational hints
Khi văn bản dưới đây nói rằng một thuộc tính trên một yếu tố bản đồ đến chiều tài sản (hoặc tài sản), có nghĩa là nếu các phần tử có một thuộc tính được thiết lập, và phân tích giá trị của thuộc tính đó sử dụng rules for parsing dimension values không tạo ra lỗi, khi đó tác nhân người dùng được mong đợi sử dụng thứ nguyên được phân tách là làm giá trị cho một thuộc tính , với giá trị được cho dưới dạng chiều dài pixel nếu kích thước là số nguyên và giá trị được đưa ra dưới dạng phần trăm nếu số kích thước là phần trăm.
Bạn đã gán 'max-height' cho div cha, gán chiều cao đó vào thẻ img' flex-parent img: first-of-type' tôi đã sử dụng 'first-of-type' để chỉ thực hiện' img' đầu tiên. Hình ảnh thứ hai có 'chiều cao' và' chiều rộng' để có tỷ lệ khung hình phù hợp nhưng đầu tiên là chiều rộng hiển thị không phải là tỷ lệ co – LKG
Bạn có thể xem tại đây ví dụ https://jsfiddle.net/Lokeshg27/tp53tv82/23/ – LKG