Đánh dấu: Vị trí hình ảnh

Đánh dấu: Vị trí hình ảnh

Chào mừng đến với Bài kiểm tra vị trí hình ảnh! Cách tốt nhất để thử nghiệm vị trí hình ảnh là nhẹ nhàng chôn hình ảnh của bạn trong một biển chữ. Chúng ta hãy bắt đầu nhé.

Khi nói đến việc căn chỉnh hình ảnh, người dùng sẽ có thể chọn giữa "không có tùy chọn nào", "phải", "trái" hoặc "ở giữa". Ngoài ra, bạn có thể chọn kích thước từ các tùy chọn "hình thu nhỏ", "trung bình", "lớn" và "kích thước đầy đủ".

Bố cục hình ảnh 580x300

Hình ảnh ở trên phải được căn giữa.

Sắp xếp hình ảnh 150x150Phần còn lại của đoạn văn này chỉ để xem liệu khi căn trái hình ảnh, văn bản có bao quanh hình ảnh 150px hay không.

Như bạn có thể thấy, có khoảng trống ở phía trên, phía dưới và bên phải của hình ảnh. Văn bản không được chen vào hình ảnh, và việc chen vào là điều không tốt. Ngay cả hình ảnh cũng cần có không gian để thở. Cho phép hình ảnh thực hiện chức năng của nó mà không làm lấn át văn bản. Trong câu sau, bạn có thể thấy văn bản chảy liền mạch từ bên phải hình ảnh xuống bên dưới. Và bạn đã hoàn thành!

Tiếp theo là thử nghiệm với một hình ảnh rất lớn. Và không có sự căn chỉnh nào được chỉ định cho hình ảnh này.

Bố cục hình ảnh 1200x400

Hình ảnh trên rộng 1200px nhưng vẫn nằm gọn trong vùng nội dung.

Bố cục hình ảnh 300x200

Và bây giờ tôi muốn di chuyển sang căn chỉnh bên phải. Một lần nữa, phải có đủ khoảng trắng ở phía trên, phía dưới và bên trái của hình ảnh. Nhìn anh ấy ở đằng kia kìa! Hình ảnh bên phải kìa! Tôi không quan tâm hình ảnh căn trái nói gì, nó được định vị rất đẹp. Bạn không cần phải lo lắng về ý kiến ​​của người khác.

Và ở đây bạn có thể thấy văn bản được bao quanh bên dưới hình ảnh căn phải, vừa khít. Vẫn phải chừa lại một khoảng không gian vừa đủ và mọi thứ phải trông đẹp và rõ ràng. đúng vậy…. Cảm giác thật tuyệt khi xem hình ảnh bên phải.

Được rồi, bạn có thể nghĩ là chúng ta đã xong, nhưng bây giờ chúng ta sẽ kiểm tra phụ đề!

Bố cục hình ảnh 580x300
Ví dụ chú thích cho hình ảnh 580x300.

Hình ảnh ở trên phải được căn giữa. Chú thích có chứa liên kết, nhưng hãy đảm bảo nó không được hiển thị theo cách kỳ lạ.

Sắp xếp hình ảnh 150x150
Một chú thích nhỏ

Phần còn lại của đoạn văn này là phần đệm để kiểm tra việc ngắt dòng cho hình ảnh 150x150 được căn trái. 

Như bạn thấy, chúng ta cần khoảng trống phía trên, phía dưới và bên phải của hình ảnh. Văn bản không được chen vào hình ảnh, và việc chen vào là điều không tốt. Ngay cả hình ảnh cũng cần có không gian để thở. Cho phép hình ảnh thực hiện chức năng của nó mà không làm lấn át văn bản. Trong câu sau, bạn có thể thấy văn bản chảy liền mạch từ bên phải hình ảnh xuống bên dưới. Và bạn đã hoàn thành!

Đây là bài kiểm tra một hình ảnh rất lớn. Và cũng không có sự căn chỉnh nào được chỉ định cho hình ảnh này.

Bố cục hình ảnh 1200x400
Bình luận hình ảnh rất lớn

Hình ảnh ở trên rộng 1200px, nhưng không được vượt quá vùng nội dung. Nó phải nằm trong khu vực được chỉ định mà không làm gián đoạn dòng chảy nội dung.

Bố cục hình ảnh 300x200
Tôi cảm thấy thoải mái hơn khi ở bên phải.

Và bây giờ tôi muốn chuyển sang hình ảnh căn phải. Một lần nữa, phải có đủ khoảng trắng ở phía trên, phía dưới và bên trái của hình ảnh. Nhìn anh ấy ở đằng kia kìa! Hình ảnh bên phải kìa! Tôi không quan tâm hình ảnh căn trái nói gì, nó được định vị rất đẹp. Đừng lo lắng về ý kiến ​​của người khác.

Và ở đây bạn có thể thấy văn bản được bao quanh bên dưới hình ảnh căn phải, vừa khít. Vẫn phải chừa lại một khoảng không gian vừa đủ và mọi thứ phải trông đẹp và rõ ràng. đúng vậy…. Cảm giác thật tuyệt khi xem hình ảnh bên phải.

Vâng, vậy là xong phần này. Làm tốt lắm khi thử nghiệm vị trí đặt hình ảnh!