HTML: Cách thay đổi kích thước hình ảnh bằng truy vấn vùng chứa CSS!

Bạn có biết điều gì thú vị hơn việc sử dụng hình ảnh khi xây dựng một trang web không? Còn việc tạo một thứ gì đó bằng HTML và CSS trông và hoạt động giống như một hình ảnh thì sao? Và bạn biết không, việc này giờ đây cực kỳ dễ dàng với các truy vấn vùng chứa. Trong bài đăng này, chúng ta sẽ tạo một quảng cáo trông giống như một hình ảnh bằng HTML và CSS.

Sau đó, chúng ta sẽ làm cho nó hoạt động giống như một hình ảnh khi nó được thu nhỏ, mở rộng và di chuyển đến các vị trí khác trong tài liệu. Được rồi, hãy kiểm tra xem nó ra!

Ok, vậy là chúng tôi có quảng cáo Vans này trong thanh bên của trang web mà chúng tôi đang xây dựng và hiện tại nó là một hình ảnh.

Điều này gây khó khăn cho việc chỉnh sửa; một nhà thiết kế sẽ cần cập nhật nó và cung cấp cho chúng tôi một hình ảnh mới nếu cần thay đổi điều gì đó.

Ngoài ra, chúng tôi có thể cần nhiều phiên bản để sử dụng với bộ nguồn để nó trông sắc nét trên cả màn hình có mật độ cao và độ phân giải thấp.

Vì vậy, chúng tôi có nhiệm vụ chuyển đổi nó sang HTML; Làm thế nào chúng ta có thể làm điều này?

Một số nhược điểm khi sử dụng hình ảnh và đơn vị khung nhìn

Chà, chúng tôi có thể sử dụng đơn vị khung nhìn, nhưng chúng tôi cần thêm mã bổ sung nếu đặt quảng cáo ở các vị trí khác nhau nơi kích thước của nó sẽ khác nhau vì mọi thứ sẽ dựa trên khung nhìn chứ không phải kích thước vùng chứa.

Vì vậy, chúng ta có thể thực hiện được nhưng nó có thể hơi lộn xộn một chút. Thay vào đó, chúng ta có thể sử dụng truy vấn vùng chứa và đơn vị truy vấn vùng chứa. Truy vấn vùng chứa hơi giống truy vấn phương tiện nhưng dựa trên kích thước của bất kỳ vùng chứa cụ thể nào trong trang thay vì chế độ xem tổng thể.

Thiết lập vùng chứa với container-type CSS

Được rồi, hãy kiểm tra xem chúng ta đang bắt đầu với cái gì.

Vì vậy, nó trông khá tốt ở đây nhưng nó hoạt động như thế nào khi nó phản hồi?

Uh, văn bản và đường viền không thay đổi kích thước, vì vậy nó cần một chút tình cảm vì nó khá bị hỏng. Bây giờ, một điều chúng tôi đang làm ở đây là chúng tôi đang sử dụng aspect-ratio cho phép vùng chứa phản hồi dưới dạng hình ảnh, như vậy là ổn.

 figure { aspect-ratio: 1 / 1.5; }

Chúng ta chỉ cần thay đổi tất cả các kích thước của nội dung để nội dung đó phản hồi chính xác. Bước đầu tiên ở đây là cung cấp một vùng chứa để theo dõi kích thước của chúng tôi. Đây sẽ là phần tử hình của chúng ta.

Để sử dụng các truy vấn vùng chứa ở đây, chúng ta cần xác định cái được gọi là bối cảnh ngăn chặn. Chúng ta có thể làm điều này với thuộc tính container-type . Trong ví dụ này, chúng ta có thể sử dụng giá trị kích thước nội tuyến.

 figure { ... container-type: inline-size; }

Điều này sẽ thiết lập một vùng chứa sẽ định cỡ mọi thứ dựa trên kích thước nội tuyến của nó, trong trường hợp này sẽ là chiều rộng của hình. Được rồi, vậy là bây giờ chúng ta đã có một vùng chứa để giám sát, vì vậy giờ đây chúng ta có thể thoải mái sử dụng các đơn vị truy vấn vùng chứa. Và, có rất nhiều để lựa chọn. Chúng ta có thể sử dụng bất kỳ giá trị đơn vị nào sau đây:

• cqw
• cqh
• cqi
• cqb
• cqmin
• cqmax

Ở đây, chúng ta sẽ sử dụng cqi mà tôi tin là viết tắt của truy vấn vùng chứa nội tuyến. Một đơn vị cqi bằng 1% chiều rộng của thùng chứa. Được rồi, đó là tất cả những gì chúng ta cần; từ đây, chúng tôi chỉ thiết lập các đơn vị nếu cần.

Ở đây, chúng tôi có một số thuộc tính tùy chỉnh được sử dụng cho một số thành phần trong quảng cáo này.

 figure { ... --frameInset: 0.5rem; --frameStyle: solid 0.25rem currentColor; }

Hãy bắt đầu với số lượng khung này được chèn vào từ mép ngoài của thùng chứa. Hãy làm cho nó ba cqi .

 figure { ... --frameInset: 3cqi; }

Tiếp theo, hãy đặt độ dày của đường viền ở đây. Trong trường hợp này, tôi sẽ sử dụng hàm max để ngăn các đường viền không ngừng co lại dưới một pixel, nhưng tôi muốn chúng động miễn là chúng lớn hơn giá trị một pixel đó.

Vì vậy, giá trị đầu tiên là một pixel, sau đó giá trị thứ hai là giá trị động. Hãy biến nó thành một cqi .

 figure { ... --frameStyle: solid max(1px, 1cqi) currentColor; }

Bây giờ, đối với yếu tố strong , là tiêu đề chính, văn bản "Vans", hãy đặt nó là 25 cqi . Và đối với khoảng trống bên dưới tiêu đề, hãy đặt nó là ba cqi .

 strong { font-size: 25cqi; padding-bottom: 3cqi; }

Bây giờ, hãy chuyển sang phụ đề "Off the Wall". Nó sẽ có kích thước bằng một nửa tiêu đề chính, vì vậy hãy thử mười hai cqi . Và đối với khoảng trống phía trên văn bản, hãy sử dụng lại ba cqi .

 em { font-size: 12cqi; padding-top: 3cqi; }

Được rồi, đối với phần cuối cùng, nhãn "Từ năm 1966", hãy sử dụng cỡ chữ 6 cqi . Và đối với khoảng trống bên trên và bên dưới, chúng tôi đang sử dụng thuộc tính logic cho padding-block có tối đa hai giá trị. Giá trị đầu tiên là giá trị phía trên văn bản và giá trị thứ hai dành cho khoảng trắng bên dưới.

Vì vậy, hãy bắt đầu với hai cqi ở trên. Và, theo tính toán của chúng tôi, chúng tôi sẽ giữ nguyên --frameInset , nhưng chúng tôi sẽ sử dụng thêm 5 cqi không gian.

 time { font-size: 6cqi; padding-block: 2cqi calc(5cqi + var(--frameInset)); }

Được rồi, điều này có vẻ tốt.

Chúng ta hãy xem nó phản ứng như thế nào. Khi chúng tôi siết chặt nó, mọi thứ đều phản hồi đồng đều như chúng tôi mong muốn. Nó trông rất giống một hình ảnh.

Nó trông khá đẹp ngay cả khi nó nhỏ và bạn có thể thấy rằng các đường viền không bao giờ co lại dưới một pixel. Sau đó, khi chúng ta có chiều rộng thực sự hẹp, nó sẽ rộng hơn và mọi thứ trông vẫn đẹp.

Thật tuyệt? Một tập hợp các phong cách và nó sẽ hoạt động xuyên suốt. Khi chúng tôi thu nhỏ nó qua lại, nó trông rất tuyệt.

Bây giờ, điều thú vị hơn nữa là chúng ta có thể lấy phần đánh dấu quảng cáo của mình, di chuyển nó đến hoặc vùng cột chính ở đây và mọi thứ tiếp tục hoạt động giống như nếu nó là một hình ảnh.

 <header><h1>A Brief History of Vans</h1></header> <div class="content"> <main> <figure> <svg viewBox="0 0 256 256"> <path d="M90.4,67.9C88,69,87.1,70.6,83,80c-4.4,10.2-4.8,12.3-3.1,15"/> <path d="M97.4,95.2c-0.6,0.6-1.2,1.7-1.2,2.3s0"/> </svg> <figcaption> <strong>Vans</strong> <em>Off the Wall</em> <time>Since 1966</time> </figcaption> </figure> ... </main> </div> 

Điều này thật tuyệt vời và thật tuyệt vời. Hãy nhớ rằng, chỉ có một bộ kiểu có thể thực hiện được tất cả những điều này. Và không có truy vấn phương tiện nào được tham gia. Nhìn chung, có khá nhiều thứ liên quan đến các truy vấn vùng chứa, vì vậy hãy chú ý đến các bài đăng trong tương lai mà tôi đề cập đến các khía cạnh khác nhau.

Bạn muốn thấy nó hoạt động?

Hãy xem mã demo và ví dụ về các kỹ thuật này trong ví dụ Codepen bên dưới. Nếu bạn có bất kỳ câu hỏi hoặc suy nghĩ nào, đừng ngần ngại để lại nhận xét.