Là một nhà phát triển web, bạn thường xuyên làm việc với các phần tử HTML mà, không giống như phần tử `img`, không có kích thước hoặc tỷ lệ khung hình cố định. Thông thường, bạn muốn các đối tượng này hoạt động linh hoạt trong khi vẫn duy trì tỷ lệ giữa chiều rộng và chiều cao. CSS không cung cấp giải pháp trực quan nào theo mặc định. Tuy nhiên, thuộc tính `padding dọc` có thể giải quyết được vấn đề này.
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 nó hoạt động và làm thế nào để có thể 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 padding, được cung cấp 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 Width (cụ thể là chiều rộng của phần tử mẹ). Với padding-left và padding-right, điều này là hiển nhiên, với padding-top và padding-bottom đáng ngạc nhiên, 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: