Chieu ngang của một ký tự bằng bao nhiêu css năm 2024

.parent {
  width: 700px;
  max-width: 100%;
  position: relative;
}
.ratio-box {
  width: 100%;
  padding-top: 56.25%;
}
.child {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  color: white;
  font-weight: bold;
}

5!

  

  
Phần tử này luôn có kích thước là 16/9

.parent {
  width: 700px;
  max-width: 100%;
  position: relative;
}
.ratio-box {
  width: 100%;
  padding-top: 56.25%;
}
.child {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  color: white;
  font-weight: bold;
}

Phương pháp này tương đối phổ biến, được Google áp dụng cho mã embed của Youtube, và hoạt động tốt cho mọi trình duyệt (cả IE, Safari,...).

Phương pháp 2: lợi dụng phần tử

Ở đầu bài mình có nhắc đến việc phần tử hay mặc định đã có khả năng giữ tỉ lệ. Như vậy, ta cũng có thể lợi dụng phần tử canvas này để tạo ra một ratio box hoàn hảo mà không phải dựa vào phép chia hay padding trick.

Ưu điểm so với phương pháp đầu có lẽ là trông nó ít "mẹo" hơn, hay những tỉ lệ mà phép chia ra số vô tỉ (ví dụ với tỉ lệ 3:2 thì sẽ phải là 23=0.66666666\frac{2}{3} = 0.66666666. Đoạn code thì khá giống với phương pháp đầu tiên, chỉ khác là thay cho phần tử "trick padding" thì ta thay bằng phần tử :

  
  
Phần tử này luôn có kích thước là 16/9

.parent {
  width: 700px;
  max-width: 100%;
  position: relative;
}
.ratio-box {
  width: 100%;
}
.child {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  color: white;
  font-weight: bold;
}

Cách chính thống nhất: thuộc tính

  

  
Phần tử này luôn có kích thước là 16/9

0 trong CSS

Với phương pháp chính thức được hỗ trợ bởi trình duyệt, bạn không cần phải làm rối code thêm với các thuộc tính

.parent {
  width: 700px;
  max-width: 100%;
  position: relative;
}
.ratio-box {
  width: 100%;
  padding-top: 56.25%;
}
.child {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  color: white;
  font-weight: bold;
}

5 nữa. Cùng với ví dụ tạo ra một phần tử

  
Phần tử này luôn có kích thước là 16/9

.parent {
  width: 700px;
  max-width: 100%;
}
.child {
  aspect-ratio: 16 / 9;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  color: white;
  font-weight: bold;
}