Fix hình ảnh đều nhau

29/05/2019

Bài sau » « Bài trước

Khi làm các dự án chúng ta hay gặp trường hợp show list sản phẩm, list bài viết. Tuy nhiên, vì lý do nào đó mà admin của website không xử lý hình trước khi up lên. Kết quả là các sản phẩm, bài viết không đều nhau.

Ở bài viết này Master Frontend sẽ đề cập 1 số hướng giải quyết cho hình ảnh đều nhau mà không quá quan trọng việc admin của website up hình kích thước như thế nào.

Fix hinh anh deu nhau

Cách 1: Dùng max-width và max-height cho <img>

Đây là cách thông thường, các bước làm như sau:

- Bước 1: Cho box bao thẻ img có chiều cao cố định - ví dụ khoảng height: 250pxtext-align: center để hình ảnh nằm giữa.

- Bước 2: Cho hình ảnh ở trong thuộc tính css max-width: 100%;max-height: 100%;

<div class="product-img"> <a href="#" > <img src="image_url.jpg" alt="mo ta hinh anh" ></div> </a> </div>

.product-img { text-align: center; height: 250px; } .product-img img { max-width: 100%; max-height: 100%; }

Kết quả hiển thị như hình sau:

fix hình ảnh đều nhau

Cách này thì hình ảnh theo hình vuông, chữ nhật đứng thì oke. Nếu hình chữ nhật ngang thì tạo khoảng trống lớn phía dưới tạo cảm giác nhìn không cân đối.

Cách 2: Dùng background

- Bước 1: Ta tạo cấu trúc HTML như sau:

<div class="product-img"> <a href="#" > <div class="img-box" style="background: url('image_url.jpg') center center/contain no-repeat;" ></div> </a> </div>

Ở đoạn code trên ta có cú pháp: style="background: url('image_url.jpg') center center/contain no-repeat;"

Có nghĩa là:

+ background-image: url('image_url.jpg'); - Hình ảnh nền

+ background-position: center center; - Cho vị trí background nằm giữa

+ background-size: contain; - Co giãn hình nền với kích thước đầy đủ

+ background-repeat: no-repeat; - Không lặp lại hình nền

- Bước 2: Ta cho class .img-box chiều cao cụ thể (height: 250px) là được. Hình ảnh tự động co theo khung hình và nằm ở giữa.

.product-img .img-box{ height: 250px; }

Kết quả hiển thị :

fix hinh anh deu nhau

Cách này thì hình ảnh theo chiều ngang hay đứng đều nằm ở giữa. Xem link demo ở đây.

Cách 3: Dùng object-fit

- Cách này phát triển từ cách 1 ở trên. Nhưng do thuộc tính object-fit này mới, chỉ những phiên bản sau này của trình duyệt mới hỗ trợ, nên cân nhắc khi sử dụng.

fix hinh anh deu nhau

Code CSS sửa lại như sau:

.product-img { text-align: center; height: 250px; } .product-img img { width: 100%; height: 100%; object-fit: contain; }

Như vậy, Master FrontEnd đã tổng hợp 3 phương án hay dùng trong việc fix hình ảnh đều nhau giữa các list sản phẩm, bài viết. Nếu bạn có phương pháp nào hay hơn hãy để lại bình luận cho mọi người cùng tham khảo nhé ^____^!

Bài sau » « Bài trước
Back to top