Bootstrap 4.3: Giúp chỉnh kích thước các ảnh giống nhau

Em đang học dùng bootstrap để tạo một web “image gallery” nhỏ, nhưng các ảnh em dùng thì kích thước của chúng không giống nhau, em đã thêm class img-thumbnail, img-fluid và dùng grid để chia cột nhưng ảnh chỉ giống nhau về “width” còn “height” vẫn là “auto”. Em thử chỉnh “height” với CSS thì “border” của class “img-thumbnail” lại thành ra như này
grid1
Có cách nào dùng bootstrap để chỉnh luôn “width” và “height” của các ảnh bằng nhau mà border của class “img-thumbnail” không bị lệch không ạ? Em cảm ơn

Scale cái ảnh lên là được

2 Likes

Các ảnh không cùng tỉ lệ thì phải vậy chứ biết làm sao. Nếu bạn muốn ảnh bằng nhau thì đừng để auto, cứ cho kích thước cụ thể bằng bao nhiêu pixel cho cả height và width. Lúc đó, chắc chắn có những ảnh sẽ bị méo mó thảm hại nếu ảnh đó ban đầu có tỉ lệ không phù hợp với width, height mà bạn dùng cho gallery.

2 Likes

Dùng class="w-100"

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?