Video: Kích thước width và height (CSS bài 16) 2025
Các nhà thiết kế trang Web sử dụng hình ảnh để cung cấp thông tin quan trọng, trực tiếp điều hướng trang web và đóng góp vào nhìn tổng thể và cảm thấy trên một trang web. Tuy nhiên, bạn phải sử dụng hình ảnh đúng, hoặc bạn có nguy cơ làm giảm hiệu quả của chúng.
Sử dụng các thuộc tính chiều cao và chiều rộng với phần tử
Brass
Hầu hết các trình duyệt tải xuống HTML và văn bản liên kết với một trang trước khi tải trang đồ hoạ. Thay vì làm cho người dùng chờ đợi toàn bộ trang để tải về, các trình duyệt thường hiển thị văn bản đầu tiên và sau đó điền vào đồ họa khi chúng trở nên có sẵn.
Nếu bạn cho trình duyệt biết mức độ lớn của đồ họa là gì, trình duyệt có thể dành chỗ cho nó trong màn hình hiển thị. Điều này làm tốc độ quá trình tạo đồ hoạ - và các công cụ khác - trên trang web.
Bạn có thể kiểm tra độ rộng và chiều cao của một hình ảnh bằng pixel trong bất kỳ chương trình chỉnh sửa hình ảnh hoặc trong hình ảnh người xem được xây dựng trong Windows và Mac OS. (Bạn có thể chỉ cần xem các thuộc tính của hình ảnh trong Windows hoặc Mac OS để xem chiều cao và chiều rộng của nó.)
Một cách sử dụng tốt khác của các thuộc tính chiều cao và chiều rộng là tạo các đường kẻ màu trên một trang bằng cách sử dụng chỉ là một hình vuông nhỏ màu. Ví dụ: đánh dấu này thêm hộp màu xanh 10 x 10-px vào một trang web:
Sử dụng thuộc tính
Nhìn chung, an toàn để giảm kích thước hình ảnh bằng các thuộc tính này mặc dù bạn sẽ luôn luôn muốn kiểm tra kết quả một cách cẩn thận trong quá trình thử nghiệm. Với bất kỳ hình ảnh nhạy cảm nào, bạn muốn duy trì tỷ lệ co của nó bằng cách chia các kích thước ban đầu theo một số giá trị chung.
Con số này cũng cho thấy hộp có kích thước 20 x 20 và 50 x 50 px. Đây là những thay đổi về các giá trị cho chiều cao và chiều rộng của đánh dấu để tạo ra hai hộp khác:
Sử dụng kỹ thuật này, bạn có thể biến một hình ảnh duy nhất như hộp màu xanh (chỉ có kích thước là 2. 39K) thành nhiều các đường thẳng và thậm chí các hộp:
-
Kỹ thuật này có thể đảm bảo rằng tất cả các phần chia và các phần tử biên khác trên trang của bạn sử dụng cùng màu vì chúng đều dựa trên cùng một đồ hoạ.
-
Nếu bạn quyết định muốn thay đổi tất cả các đường màu xanh lam thành màu xanh lá cây, bạn chỉ cần thay đổi hình ảnh. Mỗi hàng bạn tạo thay đổi màu sắc.
Khi bạn chỉ định chiều cao và chiều cao của hình ảnh khác với chiều cao và chiều rộng thực tế của hình ảnh, bạn dựa vào trình duyệt để phóng to màn hình.Thủ thuật này hoạt động tốt đối với các ảnh đơn màu (chẳng hạn hộp màu xanh), nhưng nó không hoạt động tốt với hình ảnh có nhiều màu hoặc hình ảnh có chứa hình ảnh thực tế.
Trình duyệt không có kích thước hình ảnh tốt, và bạn kết thúc với một hình ảnh méo mó. Con số này cho thấy trình duyệt xử lý việc mở rộng một hình trumpet như thế nào khi đánh dấu tăng gấp đôi chiều cao hình ảnh lên 4 lần và chiều rộng của nó bằng hai (lưu ý sự giống với một khung):
Brass
Nếu bạn cần nhiều kích cỡ cho hình ảnh giống nhau - như đối với một nút logo hoặc nút điều hướng - sử dụng một hình ảnh lớn làm hình mẫu cho hình ảnh đó và tạo các phiên bản nhỏ hơn. Thủ thuật này giúp bạn kiểm soát tốt hơn giao diện cuối cùng của mỗi hình ảnh.
