Height/Width trong CSS: Trong CSS, thuộc tính height và width được sử dụng để điều chỉnh kích thước của các phần tử HTML. Dưới đây là cách bạn có thể sử dụng các thuộc tính này:
- Đặt Chiều Cao (Height): Sử dụng để đặt chiều cao của phần tử.
css
/* Đặt chiều cao của phần tử là 200px */
height: 200px;
- Đặt Chiều Rộng (Width): Sử dụng để đặt chiều rộng của phần tử.
css
/* Đặt chiều rộng của phần tử là 300px */
width: 300px;
- Đặt Cả Chiều Cao và Chiều Rộng (Height and Width): Bạn có thể đặt cả hai thuộc tính chiều cao và chiều rộng cùng lúc.
css
/* Đặt chiều cao là 150px và chiều rộng là 250px */
height: 150px;
width: 250px;
- Tỷ Lệ Khung (Aspect Ratio): Bạn có thể sử dụng tỷ lệ khung để duy trì tỷ lệ gốc của phần tử bất kể kích thước màn hình.
css
/* Duy trì tỷ lệ khung 16:9 */
width: 100%;
height: 0;
padding-bottom: 56.25%; /* (9 / 16) * 100 */
- Auto Height/Width: Bạn có thể sử dụng giá trị
autođể phần tử tự động điều chỉnh kích thước dựa trên nội dung bên trong.
css
/* Phần tử tự động điều chỉnh chiều cao dựa vào nội dung */
height: auto;
/* Phần tử tự động điều chỉnh chiều rộng dựa vào nội dung */
width: auto;
Nhớ rằng, việc đặt kích thước tường minh cho các phần tử có thể ảnh hưởng đến bố cục và giao diện của trang web. Hãy sử dụng các giá trị và kỹ thuật này một cách cân nhắc để tạo ra trải nghiệm người dùng tốt hơn.