Yalnızca CSS Tam Genişlik Duyarlı Görüntüler 2 Yol

Çok uzak olmayan bir geçmişte jQuery Dağın Kralı iken ve CSS3 hala bu şekilde adlandırılmaya değerken, duyarlı arka plan görüntüleri için en popüler araç şuydu: Backstretch jQuery eklentisi.

Bu eklentiyi, aşağıdaki mülk daha fazla desteklenmeden önce yaklaşık 30 sitede kullandım (yani toplam pazar payında IE <9 düşüş):

background-size: cover;

Göre caniuse.com, bu özellik ve değer, 9 yılı aşkın bir süredir iyi bir şekilde desteklenmektedir! Ancak Backstretch veya başka bir yerel çözüm kullanarak iç içe olan web siteleri henüz güncellenmemiş olabilir.

Alternatif yöntem standardı kullanır img etiketi ve sihrini kullanır:

object-fit: cover;

Her bir çözümü nasıl kullanacağımıza bakalım ve ne zaman birini diğerine tercih edeceğinizi öğrenelim.

Geçmişimin on yılı, kurumsal web siteleri için son derece özelleştirilmiş WordPress temaları ve eklentileri oluşturmaktı. Şablonlu kart örneğini kullanarak, şu şekilde ayarlayabilirsiniz: background-size: cover çözüm.

İlk olarak, görüntünün eklendiği HTML style nitelik olarak background-image. Bir aria-label yerini alması teşvik edilmektedir. alt normalde düzenli olarak mevcut olacak özellik img etiket.

<article class="card">
<div
class="card__img"
aria-label="Preview of Whizzbang Widget"
style="background-image: url(https://placeimg.com/320/240/tech)"
></div>
<div class="card__content">
<h3>Whizzbang Widget SuperDeluxe</h3>
<p>
Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon
pie sesame snaps jelly-o.
</p>
<a href="#" class="button">Add to Cart</a>
</div>
</article>

İlgili karşılık gelen CSS aşağıdaki gibi olacaktır, burada padding-bottom görüntüyü içeren div’de 16:9 oranını ayarlamak için kullanılan garip bir numara:

.card__img {
background-size: cover;
background-position: center;
// 16:9 ratio
padding-bottom: 62.5%;
}

İşte tamamen bu çözüm:

Stephanie Eckles (@5t3ph)

Bu çözüm daha yeni bir oynatıcıdır ve aşağıdakilere göre IE < Edge 16'yı desteklemeniz gerekiyorsa sizin için mevcut değildir. caniuse verileri polyfill olmadan.

Bu stil doğrudan img etiketini değiştiriyoruz, bu nedenle kart HTML’mizi aşağıdaki şekilde güncelliyoruz. aria-label ile alt:

<article class="card">
<img
class="card__img"
alt="Preview of Whizzbang Widget"
src="https://placeimg.com/320/240/tech"
/>
<div class="card__content">
<h3>Whizzbang Widget SuperDeluxe</h3>
<p>
Liquorice candy macaroon soufflé jelly cake. Candy canes ice cream biscuit marzipan. Macaroon
pie sesame snaps jelly-o.
</p>
<a href="#" class="button">Add to Cart</a>
</div>
</article>

Ardından, güncellenmiş CSS’miz, height Herhangi bir boyuttaki görüntünün kısıtlı orana uyması için görüntüyü sınırlama özelliği. Görüntünün doğal boyutu kısıtlı görüntü boyutundan büyükse, object-fit özelliği devralır ve varsayılan olarak görüntüyü kart kabı + tarafından oluşturulan sınırlar içinde ortalar. height tanım:

.card__img {
object-fit: cover;
height: 30vh;
}

Ve işte sonuç:

Stephanie Eckles (@5t3ph)

IE’nin eski sürümlerini desteklemeniz gerekiyorsa, çoklu dolgu olmadan aşağıdakilerle sınırlısınız: background-size çözüm (bunu 2020’de söylemek bana acı veriyor ama bu özellikle işletme ve eğitim sektörleri için bir olasılık).

Her iki çözüm de, kontrol ettiğiniz genişlik:yükseklik oranına dayalı olarak tam genişlikte duyarlı bir görüntü sağlar.

Seçmek background-size eğer:

• ek içerik tutması beklenen bir kapsayıcıya başvurmak, ör. bir web sitesi başlık arka planı
• için mevcut olmayan sözde öğeler aracılığıyla ek efekt stilleri uygulamak için img eleman
• tek tip bir görüntü boyutunu daha zarif bir şekilde uygulamak için
• görüntü tamamen dekoratif ve doğasında var img semantik gerekli değildir

Seçmek object-fit eğer:

• bir standart kullanarak img bir görüntünün sağladığı tüm anlambilimi korumak için bağlamınız için en iyisidir