Cách Trình Bày Trang Web
CSS Giúp đỡ và gợi ý

Hình ảnh & phụ đề

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

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">
  <p>Scale model of the Eiffel tower in Parc Mini-France
</div>

Khi đó, trong bảng mẫu bạn sử dụng lớp “figure” để định dạng hình ảnh theo cách bạn muốn. Ví dụ, để hình ảnh trôi về bên phải, trong một khoảng trống bằng khoảng 25% độ rộng của các đoạn xung quanh, áp dụng các quy tắc này sẽ có hiệu quả:

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;
}

Thực tế, chỉ có hai khai báo đầu tiên (trôi và độ rộng) là cần 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 đề ở đây đó là hình ảnh có thể quá rộng. Trong trường hợp này, hình ảnh phải luôn rộng 136 px và DIV là 25% của chữ xung quanh. Nên nếu bạn thu hẹp cửa sổ, có thể khiến hình ảnh chảy tràn DIV (hãy thử xem!).

Nếu bạn 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 cách khác là tự điều chỉnh tỷ lệ của hình ảnh. Đó là những gì chúng tôi làm với hình ảnh phía bên phải ở đây. Như bạn có thể thấy nếu bạn làm cửa sổ rất rộng, các hình ảnh JPEG không điều chỉnh đẹp được. Nhưng nếu hình ảnh là một đồ thị hay một biểu đồ với định dạng SVG, thì trên thực tế việc điều chỉnh tỷ lệ rất đẹp. Đây là đánh dấu (mark-up) mà chúng tôi đã sử dụng:

<div class="figure">
  <p><img class="scaled" src="st-tropez.jpg"
    alt="Saint Tropez">
  <p>Saint Tropez and its fort in the evening sun
</div>

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 chính là quy tắc cuối cùng: Hãy để hình ảnh rộng bằng phần bên trong DIV (phần trong đường viền và đệm lót).

Đặt phụ đề lên trên đỉnh

Bạn thậm chí có thể đặt phụ đề lên trên đỉnh, bằng cách cho trình duyệt biết hình ảnh phải được định dạng như một bảng. Chỉ cần thêm các 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 P khác. Có nghĩa trong trường hợp này nó khớp với P thứ hai của hình ảnh, P này có mang phụ đề.

(Kỹ thuật này có thể xuất hiện một số lỗi đối với các trình duyệt cũ hơn, nhất là khi được kết hợp với điều chỉnh tỷ lệ hình ảnh, như tôi đã làm ở đây.)

Hình ảnh trong XHTML

Đề xuất hiện tại (Tháng 1/2003) cho XHTML2 có một phần tử CAPTION, có thể được sử dụng với OBJECT. Nếu đề xuất đó được chấp thuận, sẽ không cần phải sử dụng DIV và CLASS, nhưng, ít nhất trong XHTML2, bạn có thể viết:

<object data="eiffel.jpg">
  <caption>Scale model of the
    Eiffel tower in Parc
    Mini-France</caption>
</object>