Là một nhà phát triển web, bạn thường thấy mình rơi vào tình thế tiến thoái lưỡng nan khi làm việc với các phần tử HTML - chẳng hạn, không giống như phần tử img - không có kích thước cố định cũng như tỷ lệ khung hình cố định. Thông thường, bạn muốn đảm bảo rằng các đối tượng này hoạt động linh hoạt nhưng tỷ lệ giữa chiều rộng và chiều cao vẫn được duy trì. Theo mặc định, CSS không cung cấp giải pháp trực quan ở đây. Nhưng với sự trợ giúp của thuộc tính đệm dọc, bạn có thể đạt được mục tiêu của mình.
Hãy lấy ví dụ thường ngày về hình ảnh sản phẩm hình vuông. Mặc dù bản thân hình ảnh không nhất thiết phải là hình vuông, nhưng chúng ta muốn hiển thị chúng với tỷ lệ khung hình 1:1 mà không cần bất kỳ thao tác bổ sung hay biến dạng nào, và chiều rộng (và do đó chiều cao) của chúng phải thay đổi linh hoạt. Đoạn mã sau đây giúp bạn dễ dàng đạt được điều này bằng CSS mà không cần bất kỳ mã đánh dấu bổ sung nào.:
1bc3a80de3db90cdf0535541236d95f2
Với kết quả:
Nhưng tại sao điều này lại hiệu quả và làm cách nào để tạo ra các tỷ lệ khung hình khác? Chìa khóa của điều này nằm ở thuộc tính đệm, thuộc tính này - được chỉ định bằng giá trị phần trăm - luôn dựa trên cùng một giá trị cơ bản với thuộc tính Chiều rộng (cụ thể là chiều rộng của phần tử gốc). Điều này hiển nhiên đối với phần đệm bên trái và phần đệm bên phải, gây ngạc nhiên cho phần đệm trên và phần đệm dưới cùng, nhưng rất hữu ích trong trường hợp này.
Ví dụ: nếu bạn muốn tỷ lệ khung hình là 16: 9, bạn chọn giá trị chiều rộng: 100%; padding-bottom: 56,25% ;. Một tỷ lệ khung hình có tính đến tỷ lệ vàng là chiều rộng: 100%; phần đệm-đáy: 61,81%; có thể nhận ra.
Với sự trợ giúp của calc, bạn có thể chỉ định trực tiếp tỷ lệ khung hình, ví dụ: 16: 9 với padding-bottom: calc (1 / (16/9) * 100%). Nếu phần tử bao gồm các phần tử lồng nhau, xa hơn, phần tử con được định vị tuyệt đối để bù đắp cho phần đệm của phần tử mẹ:
1bc3a80de3db90cdf0535541236d95f2
Điều này dẫn đến kết quả sau: