CHỮ NẰM TRÊN HÌNH CSS

HTML ko có phần tử nào được cho phép chèn hình hình ảnh với phụ đề. Vụ việc này từng được lời khuyên một lần (xin xem HTML3), tuy thế chưa bao giờ được đưa vào HTML4. Đây là một phương pháp để mô phỏng 1 phần tử hình ảnh như vậy:

Bạn đang xem: Chữ nằm trên hình css

Scale model of the Eiffel tower in Parc Mini-France
lúc đó, trong bảng mẫu bạn sử dụng lớp “figure” để định dạng hình ảnh theo cách các bạn muốn. Ví dụ, để hình ảnh trôi về bên phải, trong một không gian bằng khoảng 25% độ rộng của các đoạn xung quanh, áp dụng những quy tắc này sẽ sở hữu hiệu quả:

div.figure float: right; width: 25%; border: thin silver solid; margin: 0.5em; padding: 0.5em;div.figure phường text-align: center; font-style: italic; font-size: smaller; text-indent: 0;Thực tế, chỉ gồm hai khai báo thứ nhất (trôi cùng độ rộng) là buộc phải thiết, phần còn lại chỉ để trang trí.

Điều chỉnh tỷ lệ hình ảnh

Có một vấn đề tại đây đó là hình hình ảnh có thể vượt rộng. Vào trường hòa hợp này, hình ảnh phải luôn rộng 136 px với DIV là 25% của chữ xung quanh. Nên nếu như bạn thu không lớn cửa sổ, hoàn toàn có thể khiến hình ảnh chảy tràn DIV (hãy demo xem!).

Nếu chúng ta biết độ rộng của tất cả các hình ảnh trong tài liệu, bạn có thể nhập một độ rộng tối thiểu cho DIV, như thế này:

DIV.figure min-width: 150px;Một giải pháp khác là tự điều chỉnh xác suất của hình ảnh. Đó là phần đông gì shop chúng tôi làm với hình ảnh phía bên đề nghị ở đây. Như bạn có thể thấy nếu như bạn làm cửa sổ rất rộng, những hình hình ảnh JPEG không điều chỉnh đẹp được. Tuy thế nếu hình ảnh là một đồ thị hay là 1 biểu đồ dùng với định dạng SVG, thì trên thực tiễn việc điều chỉnh phần trăm rất đẹp. Đây là lưu lại (mark-up) mà công ty chúng tôi đã sử dụng:

Saint Tropez and its fort in the evening sun

Saint Tropez và pháo đài trong hoàng hôn

Xem thêm: Kỹ Thuật Trồng Cây Gáo Vàng Chất Lượng Cao, Cây Gáo Vàng Giống 2021

Và đấy là bảng mẫu:

div.figure float: right; width: 25%; border: thin silver solid; margin: 0.5em; padding: 0.5em;div.figure p. text-align: center; font-style: italic; font-size: smaller; text-indent: 0;img.scaled width: 100%;Phần bổ sung duy nhất đó là quy tắc cuối cùng: Hãy để hình ảnh rộng bằng phần phía bên trong DIV (phần trong con đường viền và đệm lót).

Biển Địa Trung Hải gần Mũi Ferrat

Bạn thậm chí rất có thể đặt phụ đề lên trên mặt đỉnh, bằng cách cho trình chú tâm biết hình ảnh phải được định dạng như một bảng. Chỉ cần thêm những quy tắc vào bảng mẫu từ các phần trước: div.figure p. display: table-cell; width: 100%;div.figure p. + p display: table-caption; caption-side: top;Dấu "+" khiến quy tắc khớp với một p. Theo sau bằng một phường khác. Gồm nghĩa vào trường hợp này nó khớp với phường thứ hai của hình ảnh, P này còn có mang phụ đề. (Kỹ thuật này rất có thể xuất hiện một số lỗi đối với các trình chuẩn y cũ hơn, nhất là khi được kết phù hợp với điều chỉnh xác suất hình ảnh, như tôi đã làm cho ở đây.)

Hình ảnh trong XHTML

Đề xuất hiện thêm tại (Tháng 1/2003) đến XHTML2 có một phần tử CAPTION, có thể được sử dụng với OBJECT. Nếu lời khuyên đó được chấp thuận, sẽ không nhất thiết phải sử dụng DIV với CLASS, nhưng, tối thiểu trong XHTML2, chúng ta cũng có thể viết: Scale model of the Eiffel tower in Parc Mini-France
Phạm vi hoạt độngKỹ thuật báo cáoMục lụcPhiên dịchPhần mềmTiềm kiếmBên cạnh:Cách thứcCSSGiúp đỡ và gợi ý