Tìm hiểu cách ngăn Flexbox của CSS kéo dài hình ảnh của bạn theo chiều ngang.
Flexbox có một hành vi mặc định kỳ lạ trong đó hình ảnh được kéo dài theo chiều ngang bằng toàn bộ chiều rộng của vùng chứa mẹ của nó. Vì vậy, nếu bạn có một phần tử mẹ (flex container) với flex-direction: column và một phần tử con (flex item) là một hình ảnh, sau đó là chiều cao tự nhiên của hình ảnh được duy trì trong khi chiều rộng được kéo dài rộng bằng vùng chứa mẹ.
Hành vi này không nhất quán, tùy thuộc vào biểu định kiểu CSS mặc định của trình duyệt của bạn (Biểu định kiểu tác nhân người dùng).
May mắn thay, giải pháp là đơn giản. Bạn chỉ cần thay thế align-self của hình ảnh / item flex stretch mặc định của thuộc tính giá trị với một giá trị khác.
Thay vì stretch bạn có thể sử dụng center , thao tác này sẽ loại bỏ việc kéo giãn hình ảnh và căn chỉnh hình ảnh của bạn theo chiều dọc ở giữa vùng chứa chính.
img {
align-self: center;
}Ví dụ
Kiểm tra ví dụ CSS sau đây trong đó chúng ta có 1 phần tử hình ảnh cha (flex container) và 2 phần tử hình ảnh con (flex item) bên trong.
- Phần tử hình ảnh đầu tiên có
align-self: stretchmặc định của trình duyệt điều này làm hỏng tỷ lệ khung hình. - Trên phần tử hình ảnh thứ hai, tôi đã thêm một lớp tiện ích có tên là
.self-center, vớialign-self: centerkhai báo loại bỏ sự kéo dài:
https://codepen.io/StrengthandFreedom/pen/qBBoMOX
Tuyệt vời, vấn đề đã được giải quyết!
Lưu ý:bạn cũng có thể sử dụng top , để căn chỉnh hình ảnh của bạn theo chiều dọc với đầu vùng chứa chính.
img {
align-self: top;
}
Cả hai phương pháp sẽ xóa giá trị co giãn khỏi hình ảnh của bạn, nhưng liệu bạn có nên sử dụng top hoặc center tùy thuộc vào những gì bạn muốn làm với hình ảnh của mình.
Điều cần biết
Các mục linh hoạt có align-self mặc định giá trị của stretch . Vì vậy, cho dù flex-item (phần tử con) của bạn là một hình ảnh hay một phần tử HTML khác, nó sẽ được kéo giãn theo chiều ngang theo mặc định.