Làm thế nào để cắt ảnh trong WordPress sử dụng CSS?

Hình ảnh là một yếu tố đóng vai trò vô cùng quan trọng trong website, do vậy mọi người luôn cố gắng đầu tư thời gian và công sức của mình để có thể cải thiện việc hiển thị hình ảnh trên web một cách tốt nhất. Và việc cắt hình ảnh là một trong những thao tác phải làm thường xuyên để bạn có thể căn chỉnh hình ảnh.

Hôm nay mình sẽ chỉ cho các bạn một cách rất nhanh, rất tiện lợi để cắt một lúc tất cả các hình ảnh trong cùng một class mà bạn muốn hiển thị trên website bằng cách sử dụng CSS trên WordPress.

Việc cắt xén một hình ảnh và upload lên website dễ dàng như ăn một chiếc bánh vậy. Nhưng nếu bạn muốn tất cả hình ảnh trong cùng một class đều được đồng bộ giống nhau về kích cỡ cũng như kiểu dáng thì không hề đơn giản. Nó sẽ ngốn của bạn hàng giờ đồng hồ để bạn cắt từng cái ảnh một và upload nó lên! Tin mình đi!

Với phương pháp cắt ảnh bằng CSS, bạn chỉ cần sử dụng một vài đoạn code đơn giản để cắt một lúc tất cả các ảnh cần hiển thị trên website. Nghe có vẻ khá khó hiểu vì nó thuộc về kĩ thuật, nhưng thật ra nó rất đơn giản và bạn dễ dàng thực hiện theo!

Bước 1: Kiểm tra các hình ảnh mà bạn muốn cắt

Đầu tiên, trên website của bạn, di chuyển con chuột đến hình ảnh bạn muốn cắt xén lại, sau đó click chuột phải > chọn Kiểm tra (Inspect). Trong trường hợp này, mình sẽ sử dụng CSS để chỉnh sửa cùng lúc tất cả các ảnh đại diện cho bài viết trên trang blog tập hợp bài viết.

Kiểm tra các hình ảnh mà bạn muốn cắt

Bạn sẽ thấy một vùng xuất hiện trên màn hình và dòng code có tên của yếu tố mà bạn muốn kiểm tra như ảnh dưới. Ở cột bên phải, bạn có thể thấy các thông số cho các hình ảnh đó. Dòng in đậm chính là tên của tập hợp những hình ảnh bạn sắp căn chỉnh. Hãy chú ý tới vùng này vì chúng ta sẽ phải xử lý nó trong bước tiếp theo.

Kiểm tra hình ảnh ở vùng code

Bước 2: Thử các cách hiển thị hình ảnh sao cho hợp với mong muốn của bạn nhất

Thông thường thì có 3 thông số dùng để xác định cách mà bạn sẽ hiển thị hình ảnh: chiều rộng, chiều cao và phong cách hiển thị hình ảnh (phong cách hiển thị hình ảnh ở đây có thể hiểu là cách kéo giãn hình ảnh, phóng to hoặc thu gọn sao cho vừa vặn với vùng chứa ảnh). Nếu các hình ảnh của bạn chưa được xác định các thông số trên thì bạn hãy bổ sung nhé!

Bạn có thể thêm các điều kiện về “chiều rộng” (width), “chiều cao” (height) của ảnh bạn muốn căn chỉnh bên cạnh ở cột bên phải. Sau đó, nhớ thêm ‘object-fit’ (đây là một thuộc tính của CSS) cho phong cách hiển thị ảnh và chọn một trong những kiểu dáng có sẵn để hiển thị hình ảnh nhé!

Thử các cách hiển thị hình ảnh

Bạn cũng có thể thử cắt ảnh với chiều rộng, chiều cao hoặc các phong cách hiển thị cho ảnh theo những ý mình nhau cho đến khi nào chọn được kiểu mà bạn ưng ý nhất.

Có khoảng 8 phong cách hiển thị khác nhau cho bạn để hiển thị ảnh, bạn nên chọn cẩn thận để có được sự căn chỉnh phù hợp hoàn hảo nhất cho trang web nhé! Mỗi phong cách hiển thị ảnh này lại có những ưu và nhược điểm riêng, nó còn phụ thuộc vào khung chứa ảnh mặc định trên web (hoặc khung chứa ảnh mặc định của theme bạn dùng) và tỷ lệ ảnh.

Mình đã thử tất cả các cách hiển thị đó và nhận thấy vài điều khá thú vị. Ví dụ như 2 cách là Fill style và Cover style thì khá giống nhau, nó giúp bạn tự động căn chỉnh ảnh cho vừa vặn cân đối khung hình. Trong khi đó 2 cách là Scale-down style và Contain style thì khiến hình ảnh trở nên hơi nhỏ đi một chút so với tổng thể. Hoặc bạn có thể sử dụng None-style nếu bạn nghĩ hình ảnh đã ổn rồi và không cần thiết thay đổi điều gì nữa.

The Fill style - Crop Images in WordPress Using CSS
The Fill style
The Scale-down style - Crop Images in WordPress Using CSS
The Scale-down style
The Inherit style - Crop Images in WordPress Using CSS
Inherit style

Bước 3: Thêm CSS bổ sung vào website của bạn

Sau khi chọn được phong cách và kích cỡ ảnh phù hợp thì đã đến lúc bạn cắt xén ảnh bằng CSS rồi.

Đầu tiên, bạn cần sao chép dòng bôi đậm mà mình mà đánh dấu highlight ở Bước 1, đồng thời cũng cần sao chép 3 yếu tố về chiều cao, chiều rộng và phong cách hiển thị ảnh mà bạn đã lựa chọn. Cụ thể, hãy nhìn những chỗ mình bôi đậm dưới ảnh này:

Sao chép dòng bôi đậm

Sau đó, đi tới phần Tùy biến (Customizer ) > CSS bổ sung (Additional CSS), nhập đoạn code vào đó và xem sự thay đổi ở phần hiển thị bên cạnh. Hoặc nếu không, bạn có thể tự gõ phần code một cách thủ công.

Nhập đoạn code

Ở trong ví dụ này, mình cần phải nhập đoạn code như sau:

.blog-grid .entry-media img {
    width: 500px;
    height: 300px;
    object-fit: cover;
}

Nếu hình ảnh vẫn hiển thị chưa như mong đợi lắm thì bạn có thể chỉnh sửa trực tiếp các thông số lần nữa tại phần code này luôn. Cuối cùng thì hãy nhớ click Xuất bản (Publish) để lưu lại các thao tác vừa rồi.

Bạn đã thấy được tip mình nêu trong bài viết này nó dễ dàng thực hiện và thuận tiện như thế nào rồi chứ. Bên cạnh đó, bạn cũng nên chú ý nhiều hơn tới việc tối ưu hóa hình ảnh để nâng cao hiệu suất của trang web WordPress. Bây giờ thì bạn có thể tiết kiệm được khá nhiều thời gian để căn chỉnh hình ảnh. Hy vọng bạn có thể đạt được kết quả như mong đợi và trở nên vui vẻ hơn khi giải quyết với các vấn đề về ảnh trên website nhé!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *