Nếu một hình ảnh rộng hơn cột nội dung chính (như thường xảy ra trên màn hình nhỏ hơn), thì DevSite sẽ tự động ràng buộc hình ảnh đó theo chiều rộng của cột. Tuy nhiên, nếu hình ảnh đã đặt cả thuộc tính width và height, thì chỉ chiều rộng mới được đổi kích thước, khiến hình ảnh bị méo. Do đó, đừng đặt height của hình ảnh. Điều này có nghĩa là trang có thể vẽ lại nếu hình ảnh tải chậm (gây ra hiện tượng chuyển trang), nhưng điều đó vẫn tốt hơn so với hình ảnh không vừa với màn hình.
Bạn có thể áp dụng class="screenshot" cho một hình ảnh để tạo đường viền giúp hình ảnh đó tách biệt với văn bản ở gần. Phương thức này thường được dùng cho ảnh chụp màn hình có nền trắng và bị mất trên trang. Không sử dụng thuộc tính này cho những hình ảnh không cần đến.
Nổi bên cạnh văn bản
Hình ảnh ở bên phải cũng có class="attempt-right", giúp hình ảnh nổi bên phải trên màn hình lớn hơn, nhưng buộc hình ảnh vào bố cục dọc trên màn hình nhỏ hơn, máy tính bảng và nhỏ hơn, nơi việc nổi bên phải sẽ gây ra sự cố. Bạn cũng có thể dùng class="attempt-left". Để sử dụng attempt-left và attempt-right cùng nhau, hãy đảm bảo phần tử attempt-left xuất hiện trước.
Khi ở chế độ nổi, hình ảnh không được vượt quá 50% chiều rộng cột. Nếu có, các thành phần này sẽ được điều chỉnh theo tỷ lệ.
<img src="/path/to/image.png" alt="Alert dialog"
class="screenshot attempt-right">
Bạn có thể sử dụng các lớp tương tự để nổi các phần tử khác, chẳng hạn như <figure> chứa cả hình ảnh và chú thích:
<figure class="attempt-right">
<img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
<figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>
Xoá văn bản nổi
Để ngăn văn bản bao quanh một phần tử nổi và hiển thị ở chiều rộng gốc, bạn có thể thêm lớp clear vào các phần tử bị ảnh hưởng theo sau phần tử nổi.
<p class="clear">Hello world.</p>
Ví dụ về lớp rõ
Trong ví dụ này, đoạn văn thứ hai bao gồm một lớp clear.
Đoạn văn bản này bao quanh hình ảnh nổi . Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Đoạn văn này có một lớp rõ ràng và không bao quanh hình ảnh nổi. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ví dụ không có lớp clear
Trong ví dụ này, cả hai đoạn văn đều bao quanh hình ảnh nổi.
Đoạn văn này bao quanh hình ảnh nổi. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Đoạn văn này bao quanh hình ảnh nổi. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Hình ảnh giao diện tối
DevSite cung cấp một nhóm nhỏ tên lớp có thể áp dụng cho hình ảnh để sửa đổi giao diện của hình ảnh khi bật giao diện tối.
Làm tối hình ảnh
Theo mặc định, tất cả hình ảnh ngoại trừ tệp SVG đều bị tối đi một chút trong giao diện tối.
Để xoá hiệu ứng làm tối mặc định khỏi hình ảnh khi bật giao diện tối, hãy thêm lớp không có bộ lọc vào hình ảnh:
<img src="/path/to/image.jpg" class="no-filter" alt="">
Đảo ngược hình ảnh
Đối với hình ảnh có bảng màu đơn sắc màu đen hoặc tối, hãy thêm lớp invert vào hình ảnh để hình ảnh hiển thị màu trắng/sáng trong giao diện tối:
<img src="/site-assets/logo-github.png" class="invert" alt="">
Đối với trang _index.yaml, hãy thêm invert vào trường classname cho một mục hàng:
- items:
- classname: invert
icon:
path: /site-assets/logo-github.png
Hình ảnh biến thể giao diện tối riêng biệt
Nếu bạn muốn cung cấp một hình ảnh riêng biệt chỉ hiển thị khi bật giao diện tối, hãy gói phần tử <img> hiện có trong phần tử <picture> và thêm phần tử <source> cho biến thể giao diện tối.
Trong ví dụ bên dưới, có hai tệp SVG cho biểu trưng dạng từ của Google trong phần tử <picture>. Khi bạn tắt giao diện tối, tệp hình ảnh trong phần tử <img> sẽ hiển thị, cho thấy biểu trưng dạng từ với 4 màu thương hiệu của Google. Khi bạn bật giao diện tối, tệp hình ảnh trong phần tử <source> sẽ hiển thị, trong đó biểu trưng dạng từ hoàn toàn màu trắng và không có màu sắc thương hiệu.
Ví dụ:
Mã
<picture>
<source
srcset="/devsite/images/google-dark-theme.svg"
media="(prefers-color-scheme: dark)"
class="devsite-dark-theme"
alt="">
<img src="/devsite/images/google.svg" alt="">
</picture>
Ghi chú
Vì giao diện tối được bật sau một cờ tính năng, nên vui lòng lưu ý những điều sau về các thuộc tính của phần tử <source>:
Phần tử <source> phải bao gồm một lớp devsite-dark-theme. Lớp này cung cấp một trình nối cho giao diện người dùng của DevSite để cập nhật thuộc tính nội dung đa phương tiện và giá trị của thuộc tính đó tuỳ thuộc vào tuỳ chọn giao diện tối mà người dùng chọn: light, dark hoặc device.
Thuộc tính nội dung nghe nhìn phải bao gồm truy vấn nội dung nghe nhìn (prefers-color-scheme: dark) trong giá trị của thuộc tính đó.
Nếu bạn đã có các phần tử <source> có truy vấn media trong thuộc tính nội dung nghe nhìn, hãy thêm các truy vấn nội dung nghe nhìn hiện có bằng and (prefers-color-scheme: dark) hoặc thêm một phần tử <source> mới có giá trị thuộc tính nội dung nghe nhìn là (prefers-color-scheme: dark). Truy vấn media và giá trị của truy vấn đó sẽ bị xoá hoặc thay thế tuỳ thuộc vào tuỳ chọn giao diện tối mà người dùng chọn.
Mặc dù về mặt kỹ thuật, tên tệp của hình ảnh biến thể giao diện tối trong thuộc tính srcset có thể là bất kỳ tên nào, nhưng bạn nên thêm -dark-theme vào tên tệp của hình ảnh hiện có.