Bạn có thể nghĩ về một bảng vẽ như một loại nhóm lớp đặc biệt. Một bản vẽ nghệ thuật cắt nội dung của bất kỳ phần tử chứa nào vào ranh giới của nó. Hệ thống phân cấp của các thành phần trong một bảng vẽ được hiển thị trong bảng điều khiển Lớp, cùng với các lớp và nhóm lớp. Bảng vẽ có thể chứa các lớp và nhóm lớp, nhưng không chứa các bảng vẽ khác

Trực quan, các bảng vẽ đóng vai trò là các khung vẽ riêng lẻ trong một tài liệu. Bất kỳ lớp nào trong tài liệu không có trong bảng vẽ được nhóm ở đầu bảng điều khiển Lớp và không bị cắt bởi bất kỳ bảng vẽ nào

Giả sử bạn đang soạn thảo một email trong Outlook 2016 cho Mac và muốn bao gồm ảnh. Bạn Chèn hình ảnh nhưng sau đó quyết định làm cho hình ảnh nhỏ hơn. Bạn làm nó như thế nào?

Bấm vào một trong các núm điều khiển xung quanh ảnh và kéo vào trong để giảm kích cỡ của ảnh; . Kéo núm điều khiển ở trên cùng của ảnh sang trái hoặc phải để xoay nó

Để thêm bóng đổ, các cạnh mềm mại hoặc các hiệu ứng nghệ thuật khác vào ảnh của bạn, hãy Ctrl+bấm hoặc bấm chuột phải vào ảnh, rồi chọn định dạng ảnh

Tôi gặp một tình huống nhỏ vào ngày hôm trước khi tôi cần tạo một trong những hộp thân thiện với tỷ lệ khung hình đó. Đây không phải là công cụ đặc biệt mới. Tôi nghĩ rằng tín dụng ban đầu đã có từ năm 2009 và Tỷ lệ nội tại của Thierry Koblentz và duy trì mức độ phổ biến ngay cả đối với các loại nội dung khác với các bài báo như Hộp độn của chú Dave

Chúng ta hãy tiếp tục một hành trình nhỏ thông qua khái niệm này, vì có rất nhiều điều để nói về

Khái niệm cốt lõi. phần đệm theo tỷ lệ phần trăm dựa trên chiều rộng

Ngay cả khi điều đó hơi không trực quan, như đối với phần đệm dọc. Đây không phải là một vụ hack, nhưng nó thật kỳ lạ.

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

1 và

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

2 dựa trên phần tử cha của

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

3. Vì vậy, nếu bạn có một phần tử rộng 500px và

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

1 là 100%, thì

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

1 sẽ là 500px

Đó không phải là một hình vuông hoàn hảo, 500px × 500px sao? . Một tỷ lệ khung hình

Nếu chúng ta buộc chiều cao của phần tử bằng 0 (

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

6) và không có bất kỳ đường viền nào. Sau đó, phần đệm sẽ là phần duy nhất của mô hình hộp ảnh hưởng đến chiều cao và chúng ta sẽ có hình vuông

Bây giờ hãy tưởng tượng thay vì đệm trên cùng 100%, chúng tôi đã sử dụng 56. 25%. Điều đó xảy ra là một 16 hoàn hảo. 9 tỷ lệ. (9/16 = 0. 5625)

Bây giờ chúng tôi có hộp tỷ lệ khung hình thân thiện, hoạt động tốt trong môi trường có chiều rộng chất lỏng. Nếu chiều rộng thay đổi, thì chiều cao cũng vậy và phần tử giữ nguyên tỷ lệ khung hình đó

trường hợp sử dụng. một hình nền

Có lẽ chúng tôi đã thực hiện khóa kiểu chữ. Nó dành cho tiêu đề của một bài báo, vì vậy sẽ rất hợp lý khi sử dụng thẻ

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

7

  Happy Birthday

Chúng tôi có thể làm cho

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

7 đó gắn thẻ hộp tỷ lệ khung hình và áp dụng khóa làm hình nền

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

Nhưng tôi đã nói dối về tỷ lệ khung hình trên đó. Nó không thực sự là một 16. 9 hình ảnh. Tôi vừa tải xuống hình ảnh đó từ một trang web chụp ảnh chứng khoán. Nó tình cờ là một SVG với một

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

9 có nghĩa là về cơ bản nó là một 1127. 34 × 591. 44 hình ảnh về tỷ lệ khung hình. Hoặc nó có thể là một hình ảnh 328 × 791

Tôi muốn nói rằng việc bất kỳ hình ảnh ngẫu nhiên nào không khớp với một tỷ lệ khung hình được xác định trước rất cụ thể là điều rất phổ biến…

Toán học của bất kỳ tỷ lệ khung hình có thể

Hình vuông hoàn hảo và 16. 9 thứ thật tuyệt, nhưng các giá trị được sử dụng cho những thứ đó chỉ là phép toán đơn giản. Tỷ lệ khung hình có thể là bất kỳ thứ gì và chúng thường hoàn toàn tùy ý. Video hoặc hình ảnh có thể được cắt thành bất kỳ kích thước nào

Vậy làm cách nào để tìm ra phần đệm đầu cho 1127 của chúng tôi. 34 × 591. 44 SVG ở trên?

Một cách là sử dụng

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

10, như thế này

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

1

Cách đây không lâu, tôi đã bày tỏ rằng việc sử dụng

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

10 ở đây có thể “chậm hơn”, nhưng tôi chưa bao giờ thấy bất kỳ bằng chứng nào về điều đó. Tôi tưởng tượng rằng đúng vậy, máy tính cần phải tính toán một thứ gì đó, vì vậy trong một trận chiến đối đầu với một tình huống không tính toán được, việc tính toán sẽ chậm hơn. Nhưng một bài toán dường như không phải là quá nhiều công việc đối với máy tính. Ví dụ: Intel Pentium III phổ biến (phát hành năm 1999) có thể thực hiện 2.054 MIPS hoặc “Hàng triệu lệnh mỗi giây”, do đó, nó sẽ giải quyết vấn đề phân chia nhanh chóng một cách khó nhận thấy. Và bây giờ chip nhanh hơn 50 lần

Nếu chúng tôi đang sử dụng bộ tiền xử lý như Sass, chúng tôi có thể thực hiện phép tính trước thời hạn

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

4

Dù bằng cách nào, tôi là người thích bỏ phép toán trong mã tác giả

Làm thế nào để bạn đưa nội dung vào bên trong nếu phần đệm đang đẩy mọi thứ xuống?

Chúng tôi đã ẩn nội dung trong bản demo ở trên, bằng cách để nội dung bị đẩy ra ngoài và ẩn phần tràn. Nhưng nếu bạn cần một hộp tỷ lệ khung hình trong khi vẫn giữ nội dung bên trong thì sao? . Chúng ta sẽ cần định vị nó sao lưu vào vị trí. Định vị tuyệt đối có thể phù hợp với công việc đó

Giả sử bây giờ chúng tôi chỉ sử dụng văn bản, nhưng vẫn muốn hộp tỷ lệ khung hình. Chúng tôi sẽ cần một trình bao bọc bên trong để định vị tuyệt đối. Hãy cụ thể với tên lớp của chúng tôi

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

5

Sau đó thực hiện định vị

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

6

Để giải trí, chúng ta hãy làm hết sức mình ở đây và căn giữa văn bản đó và định cỡ nó sao cho tỷ lệ với hộp

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

7

Vài lớp nữa để tạo kiểu

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

8

Trường hợp sử dụng. Video

Đây có lẽ là trường hợp sử dụng thực tế và phổ biến nhất số 1 cho tất cả các công cụ hộp tỷ lệ khung hình này. HTML5 

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

12 không phải là vấn đề vì nó hoạt động như thể nó có tỷ lệ khung hình giống như 

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

13. Tuy nhiên, rất nhiều video trên web xuất hiện trong

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

14 giây, không mở rộng theo tỷ lệ khung hình

Đây chính xác là nội dung của FitVids. Nó tìm các video trên trang, tìm ra tỷ lệ khung hình duy nhất của chúng, sau đó áp dụng các khái niệm CSS tương tự này cho chúng để làm cho chúng có chiều rộng linh hoạt trong khi vẫn duy trì tỷ lệ khung hình duy nhất của chúng

FitVids dựa trên jQuery, nhưng có các tùy chọn JavaScript cơ bản, chẳng hạn như tùy chọn này của Ross Zurowski

Nhưng… nếu có quá nhiều nội dung thì sao?

Quay lại nội dung tùy ý (có thể là văn bản) một chút

Về cơ bản, chúng tôi đang đặt độ cao ở đây, độ cao này sẽ luôn nhấp nháy đèn đỏ nhấp nháy khi làm việc với CSS. Web thích phát triển hướng xuống và đặt chiều cao cố định là kẻ thù đối với chuyển động tự nhiên đó

Nếu nội dung trở nên quá nhiều so với không gian, chúng ta đang ở trong lãnh thổ Thiết kế Xấu

Lãnh thổ thiết kế xấu

Có lẽ chúng ta có thể làm điều gì đó như

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

15 nhưng đó có thể là Lãnh thổ thiết kế vụng về

Chiến thuật yếu tố giả

Tôi nghĩ đây là điều đã trở thành cách tốt nhất để xử lý một hộp tỷ lệ khung hình có nội dung hoàn toàn tùy ý trong đó. Keith Grant có một bài viết hay về nó. Marc Hinse đã có lời giải thích và bản trình diễn vào năm 2013

Với kỹ thuật này, bạn sẽ có được hộp tỷ lệ khung hình với ít đánh dấu hơn và vẫn an toàn nếu nội dung vượt quá chiều cao

Mẹo nhỏ là áp dụng phần đệm% cho phần tử giả thay vì chính hộp. Bạn thả nổi phần tử giả, để nội dung bên trong có thể ở bên trong một cách độc đáo, sau đó xóa phần tử giả

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

3

Xem cách nó an toàn hơn

Và một video

Sử dụng thuộc tính tùy chỉnh

Đây có lẽ là ý tưởng tuyệt vời nhất trong tất cả

Thierry Koblentz gần đây đã viết điều này (Xóa liên kết vì trang web của Thierry đã chết. ), công nhận Sérgio Gomes cho ý tưởng

Để sử dụng nó, bạn đặt thuộc tính tùy chỉnh có phạm vi phù hợp với thành phần bạn cần

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

4

CSS tạo kiểu này đúng là thiên tài

h1 {
  overflow: hidden;
  height: 0;
  padding-top: 56.25%;
  background: url(/images/happy-birthday.svg);
}

0

Cho phép tôi trích dẫn lời giải thích từng bước của Thierry

• Chúng tôi sử dụng 

  h1 {
    overflow: hidden;
    height: 0;
    padding-top: 56.25%;
    background: url(/images/happy-birthday.svg);
  }

  16 như một cái móc để nhắm mục tiêu các hộp thích hợp
• Chúng tôi kéo dài hộp bên trong bất kể hỗ trợ cho thuộc tính tùy chỉnh
• Chúng tôi đảm bảo rằng chiều cao của hình ảnh xuất phát từ tỷ lệ nội tại chứ không phải thuộc tính 

  h1 {
    overflow: hidden;
    height: 0;
    padding-top: 56.25%;
    background: url(/images/happy-birthday.svg);
  }

  17 của chúng
• Chúng tôi tạo kiểu cho vùng chứa dưới dạng một khối chứa (vì vậy hộp bên trong tham chiếu tổ tiên đó cho vị trí của nó)
• Chúng tôi tạo một phần tử giả để sử dụng với "hack đệm" (chính phần tử đó tạo ra tỷ lệ khung hình)
• Chúng tôi sử dụng 

  h1 {
    overflow: hidden;
    height: 0;
    padding-top: 56.25%;
    background: url(/images/happy-birthday.svg);
  }

  10 và 

  h1 {
    overflow: hidden;
    height: 0;
    padding-top: 56.25%;
    background: url(/images/happy-birthday.svg);
  }

  19 để tính phần đệm dựa trên giá trị của thuộc tính tùy chỉnh
• Chúng tôi tạo kiểu cho hộp bên trong để nó khớp với kích thước của khối chứa nó

Các ý tưởng và công cụ khác

Lisi Linhart đã giới thiệu cho tôi về Ratio Buddy, điều này thật tuyệt

Lưu ý rằng nó sử dụng một phần tử giả, nhưng sau đó vẫn hoàn toàn định vị vùng chứa bên trong. Điều đó hơi kỳ lạ. Bạn có thể bỏ qua phần tử giả và đặt phần đệm trực tiếp vào vùng chứa hoặc làm nổi phần tử giả để bạn không cần vùng chứa bên trong đó. Tuy nhiên, tôi thích ý tưởng về một máy phát điện nhỏ cho việc này

Tommy Hodgins có CSSplus có tính năng Aspecty chỉ dành cho việc này, giả sử bạn thông thạo phân tích cú pháp JavaScript và thay đổi CSS của bạn đại loại như vậy

Dự phòng nhúng CodePen

---

Tôi thực sự đã thấy khá nhiều cách sử dụng hộp tỷ lệ khung hình trong thế giới thực trong những năm qua. Hãy chia sẻ nếu bạn đã có một số kinh nghiệm