Là một nhà phát triển web, người ta thường lúng túng khi làm việc với các phần tử HTML mà bản thân chúng - chẳng hạn như phần tử img - không có kích thước cố định hay tỷ lệ co cố định. Thông thường, bạn muốn đạt được rằng các đối tượng này hoạt động phản hồi, nhưng tỷ lệ giữa chiều rộng và chiều cao vẫn được duy trì. CSS không cung cấp một giải pháp trực quan ở đây theo mặc định. 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ụ hàng ngày về hình ảnh bài báo hình vuông, đồ họa của chúng không nhất thiết phải là hình vuông, nhưng chúng tôi muốn hiển thị chúng mà không cần nỗ lực thêm và trên hết là không bị biến dạng với tỷ lệ khung hình 1: 1, theo đó chiều rộng (và do đó cả chiều cao) của chúng thay đổi theo phản ứng Nên. Với đoạn mã sau, rất dễ dàng thực hiện việc này mà không cần đánh dấu bổ sung với sự trợ giúp của CSS:
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: