Cách tạo hình ảnh thích ứng với CSS Flexbox

. Sau đó, cho phép hình ảnh xếp thành dòng tiếp theo khi cần bằng cách đặt “ flex-quấn ” giá trị thuộc tính thành “ bọc ”.

Tiếp theo, áp dụng CSS cho hình ảnh bằng cách chỉ định “ hình ảnh ” cùng với “ .images-container ' tên. Đầu tiên, đặt “ uốn cong ” giá trị thuộc tính thành “ 1 ” để phân bổ không gian trống có sẵn giữa các hình ảnh một cách đồng đều. Sau đó, đặt “ chiều rộng tối đa ” giá trị thuộc tính thành “ 100% ” để đảm bảo hình ảnh không vượt quá chiều rộng ban đầu. Đặt “ chiều cao ” giá trị thuộc tính thành “ tự động ” để duy trì tỷ lệ khung hình. Cuối cùng, thêm khoảng cách giữa các hình ảnh bằng cách đặt “ lề ” giá trị thuộc tính thành “ 10px ”:

.images-container {
trưng bày: uốn cong ;
flex-wrap: bọc;
}

.images-container img {
uốn cong: 1 ;
chiều rộng tối đa: 100 % ;
chiều cao: tự động;
lề: 10px;
}

Trước khi quấn

Hình ảnh thích ứng sử dụng CSS Flexbox đã được tạo thành công. Chế độ xem đầu ra bên dưới nằm trước cửa sổ trình duyệt:

Sau khi gói

Bây giờ, chúng ta hãy bọc cửa sổ trình duyệt để kiểm tra xem hình ảnh có thích ứng không:

Hình ảnh trên xác nhận rằng những hình ảnh được thêm vào là thích ứng.

Phần kết luận

Để tạo hình ảnh thích ứng bằng CSS Flexbox, trước tiên người dùng cần tạo cấu trúc HTML, sau đó xác định