HTML: CSS Kapsayıcı Sorgularıyla Bir Görüntü Nasıl Yeniden Boyutlandırılır?

Bir web sitesi oluştururken görsel kullanmaktan daha havalı olan ne biliyor musunuz? HTML ve CSS ile görüntü gibi görünen ve hareket eden bir şeyler yapmaya ne dersiniz? Ve biliyor musunuz, konteyner sorgularıyla bu artık çok kolay. Bu yazımızda HTML ve CSS ile görsele benzeyen bir reklam yapacağız.

Daha sonra, sıkıştırılırken, genişletilirken ve belge içinde başka konumlara taşınırken bir resim gibi davranmasını sağlayacağız. Tamam, hadi kontrol edelim!

Tamam, oluşturduğumuz sitenin kenar çubuğunda bu Vans reklamı var ve bu şu anda bir resim.

Bu, düzenlemeyi zorlaştırır; Bir şeyin değişmesi gerekiyorsa tasarımcının onu güncellemesi ve bize yeni bir görüntü sağlaması gerekir.

Ayrıca, hem yüksek yoğunluklu hem de düşük çözünürlüklü ekranlarda net görünmesi için kaynak seti ile birlikte kullanmak üzere muhtemelen birden fazla sürüme ihtiyacımız olacaktır.

Bu yüzden onu HTML'ye dönüştürmekle görevlendirildik; bunu nasıl yapabiliriz?

Görüntüleri ve Görüntüleme Birimlerini Kullanmanın Bazı Dezavantajları

Muhtemelen görüntü alanı birimlerini kullanabilirdik, ancak reklamı boyutlarının farklı olacağı farklı konumlara yerleştirecek olsaydık, her şey kapsayıcı boyutlarına değil görüntü alanına dayalı olacağından ekstra kod eklememiz gerekirdi.

Yani bunu başarabiliriz ama işler biraz karışabilir. Bunun yerine konteyner sorgularını ve konteyner sorgu birimlerini kullanabiliriz. Kapsayıcı sorguları medya sorgularına biraz benzer ancak genel görünüm yerine sayfadaki herhangi bir kapsayıcının boyutlarına dayanır.

CSS container-type Özelliğiyle Kapsayıcı Ayarlama

Tamam, neyle başladığımıza bir bakalım.

Yani burada oldukça iyi görünüyor ama tepki verirken nasıl davranıyor?

Metin ve kenarlıklar boyut değiştirmiyor, bu yüzden biraz sevgiye ihtiyacı var çünkü bu haliyle oldukça kırık. Şimdi, burada zaten yaptığımız şeylerden biri, kabın bir görüntü gibi tepki vermesine olanak tanıyan bir aspect-ratio kullanıyoruz, bu iyi bir şey.

 figure { aspect-ratio: 1 / 1.5; }

İçeriğin de doğru yanıt vermesi için tüm boyutları değiştirmemiz yeterli. Buradaki ilk adım boyutlarımızı takip edecek bir konteyner sağlamaktır. Bu bizim figür öğemiz olacak.

Burada kapsayıcı sorgularını kullanmak için kapsama bağlamı olarak bilinen şeyi tanımlamamız gerekir. Bunu container-type özelliği ile yapabiliriz. Bu örnek için satır içi boyut değerini kullanabiliriz.

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

Bu, öğeleri satır içi boyutuna göre boyutlandıracak bir kap oluşturacaktır; bu durumda şeklin genişliği olacaktır. Tamam, artık izleyecek bir kapsayıcımız var, dolayısıyla artık kapsayıcı sorgu birimlerini kullanmakta özgürüz. Ve aralarından seçim yapabileceğiniz çok şey var. Bu birim değerlerden herhangi birini kullanabiliriz:

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

Burada, satır içi konteyner sorgusu anlamına geldiğini düşündüğüm cqi kullanacağız. Bir cqi birimi konteynerin genişliğinin yüzde birine eşittir. Tamam, ihtiyacımız olan tek şey bu; buradan itibaren birimleri gerektiği gibi ayarlıyoruz.

Burada, bu reklamdaki çeşitli öğelerde kullanılan birkaç özel özelliğimiz var.

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

Bu çerçevenin kabın dış kenarından içeri girdiği miktarla başlayalım. Bunu üç cqi yapalım.

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

Daha sonra burada kenarlıkların kalınlığını ayarlayalım. Bu durumda, sınırların bir pikselin altına daralmasını önlemek için max işlevini kullanacağım, ancak o bir piksel değerinden büyük oldukları sürece dinamik olmalarını istiyorum.

Yani ilk değer bir piksel, ikincisi ise dinamik değerdir. Bunu bir cqi yapalım.

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

Şimdi ana başlık olan strong unsur olan "Vans" metni için onu yirmi beş cqi yapalım. Ve başlığın altındaki boşluk için bunu üç cqi yapalım.

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

Şimdi "Duvarın Dışında" alt başlığına geçelim. Ana başlığın yaklaşık yarısı kadar olmalıdır, bu yüzden on iki cqi deneyelim. Ve metnin üstündeki boşluk için yine üç cqi kullanalım.

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

Tamam, son parça olan "1966'dan beri" etiketi için altı cqi yazı tipi boyutunu kullanalım. Ve yukarıdaki ve alttaki boşluk için, iki değere kadar alan padding-block mantıksal özelliğini kullanıyoruz. İlk değer metnin üstündeki değer, ikinci değer ise alttaki boşluk içindir.

O halde yukarıdaki iki cqi ile devam edelim. Ve hesaplamamızda --frameInset olduğu gibi bırakacağız, ancak beş cqi ek alanla devam edeceğiz.

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

Tamam güzel, bu iyi görünüyor.

Nasıl tepki verdiğine bir göz atalım. Sıkıştırdıkça her şey istediğimiz gibi düzgün bir şekilde yanıt veriyor. Bir görüntüye çok benziyor.

Küçük olsa bile oldukça iyi görünüyor ve kenarlıkların hiçbir zaman bir pikselin altına küçülmediğini görebiliyorsunuz. Daha sonra, gerçekten dar genişliklere girdiğimizde genişliyor ve her şey hala harika görünüyor.

Bu ne kadar havalı? Tek bir stil seti ve tüm yol boyunca işe yarar. İleri geri ölçeklendirdiğimizde harika görünüyor.

Şimdi daha da güzeli, reklam işaretlememizi alıp buradaki ana sütun bölgesine taşıyabiliriz ve her şey tıpkı bir resimmiş gibi çalışmaya devam eder.

 <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> 

Bu çok güzel ve çok havalı. Tüm bunların üstesinden gelebilecek tek bir stil kümesinin olduğunu unutmayın. Ve sıfır medya sorgusu söz konusuydu. Bir bütün olarak sorguların kapsanması konusunda biraz daha fazlası var, bu nedenle farklı yönleri ele alacağım gelecekteki gönderileri takip etmeye devam edin.

Bunu Çalışırken Görmek İster misiniz?

Aşağıdaki Codepen örneğinde bu tekniklerin demo koduna ve örneklerine göz atın. Herhangi bir sorunuz veya düşünceniz varsa yorum bırakmaktan çekinmeyin.