picture öğesini bir görünüm alanı kesme noktasında kare ve geniş görüntü dosyaları arasında geçiş yapmak için kullanın. Her kaynağa kendi boyutlarını verin ve CSS’in seçilen görüntüyü orantılı biçimde ölçeklemesine izin verin. Bu kılavuz, Mac’te yerel bir örnek oluşturup test eder.

picture farklı en-boy oranları arasında nasıl geçiş yapar?

picture içinde, yedek img öğesinden önce media koşuluna sahip bir source öğesi yerleştirin. Tarayıcı, koşulu eşleşen ve kullanılabilir olan ilk kaynağı seçer, ardından o kaynağın srcset öğesinden bir görüntü seçer. Buna sanat yönetimi denir: farklı düzenler için farklı kompozisyonlar sunmak. HTML Standardı bu yaklaşımı açıkça destekler. HTML Standardı: Görüntüler

Üç parça birlikte çalışır: kaynak, kullanılacak dosyayı seçer; boyut öznitelikleri bu kaynağın oranlarını tanımlar ve CSS, görüntünün görüntüleneceği boyutu denetler. Seçilen kaynağın width ve height değerleri, kapsanan görüntünün kullanacağı en-boy oranını sağlayabilir. picture öğesi görüntüyü kendisi çizmez; bunu img yapar. HTML Standardı: Gömülü içerik

İhtiyacınız olan sonuca göre yöntemi seçin:

Gereksiniminiz Uygun yöntem
Bir kesme noktasında kompozisyonu veya en-boy oranını değiştirmek media kullanan bir source ile picture
Aynı kompozisyonun farklı çözünürlüklerini sunmak srcset; genişlik tanımlayıcıları kullanırken sizes ile
Tek bir dosyayı sabit bir çerçeve içinde kırpmak CSS boyutlandırması ve object-fit: cover

Bu yöntemler farklı kararları ele alır. Sanat yönetimi hangi kompozisyonun görüntüleneceğini belirler. Çözünürlük seçimi, tarayıcının bir kompozisyon içindeki uygun adayı seçmesini sağlar. CSS ile sığdırma, seçilen kaynağın çerçeveye nasıl yerleşeceğini belirler. MDN, picture öğesinin bu kullanımlarını ve srcset ile sığdırma özellikleri arasındaki ilişkisini belgeler. MDN: picture öğesi

Mac’inizde eksiksiz bir yerel örnek oluşturun

Örnek, turuncu bir daire ve turkuaz, köşeleri yuvarlatılmış bir dikdörtgen içeren iki özgün SVG kaynağı kullanır. Kare sürümde şekiller üst üste, geniş sürümde ise yan yana yer alır. Geçiş için harici dosya veya JavaScript gerekmez; her şey tek bir klasörde bulunur.

Oluşturulacak kaynaklar için basit bir kural vardır: görünüm alanının genişliği 700px değerinin altındaysa 600 × 600 boyutlarında kare kaynak kullanın. 700px ve üzerindeyse 1200 × 600 boyutlarında geniş kaynak kullanın. Görüntü, her iki yanında 16px boşluk bulunan içerik alanını doldurur ve en fazla 960px genişliğe ulaşır. Bu boyutlar ve kesme noktası, örnek amaçlı tasarım tercihleridir.

İki şekil kaynağını kaydedin

picture-demo adında bir klasör oluşturun. Düz metin düzenleyicisinde bu klasörün içinde aşağıdaki iki dosyayı oluşturun; dosya adlarını ve uzantılarını aynen koruyun. Her kod bloğu dosyanın tamamını içerir; içeriği Markdown çit işaretleri olmadan kopyalayın.

Bunu shapes-square.svg adıyla kaydedin:

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
  <rect width="600" height="600" fill="#fff5df"/>
  <circle cx="300" cy="180" r="100" fill="#de7b35"/>
  <rect x="150" y="340" width="300" height="160" rx="40" fill="#247d83"/>
</svg>

Bunu shapes-wide.svg adıyla kaydedin:

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="600" viewBox="0 0 1200 600">
  <rect width="1200" height="600" fill="#fff5df"/>
  <circle cx="320" cy="300" r="180" fill="#de7b35"/>
  <rect x="650" y="150" width="400" height="300" rx="60" fill="#247d83"/>
</svg>

HTML sayfasını kaydedin

Aynı klasörde index.html oluşturun. TextEdit kullanıyorsanız kodu yapıştırmadan önce File > New seçeneğini, ardından Format > Make Plain Text seçeneğini belirleyin. Dosyayı .html uzantısıyla kaydedin ve sorulursa Use .html seçeneğini seçin. Apple, HTML dosyaları oluşturmak için bu iş akışını belgeler. Apple: Mac’te TextEdit’te HTML belgeleriyle çalışma

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape study</title>
  <style>
    body { margin: 0; font-family: system-ui, sans-serif; }
    main { width: calc(100% - 32px); max-width: 960px; margin: 24px auto; }
    picture { display: block; }
    .study-image { display: block; width: 100%; height: auto; }
  </style>
</head>
<body>
  <main>
    <h1>Shape study</h1>
    <picture>
      <source media="(min-width: 700px)" srcset="shapes-wide.svg"
              width="1200" height="600">
      <img class="study-image" src="shapes-square.svg"
           width="600" height="600"
           alt="An orange circle and a teal rounded rectangle on cream.">
    </picture>
    <p>Resize the viewport to compare the two arrangements.</p>
  </main>
</body>
</html>

index.html dosyasını Safari’de açın. Görünüm alanı yeterince geniş olduğunda şekiller yan yana görünmelidir. Daha dar bir görünüm alanında ise üst üste yer almalıdır. Üç dosyayı da aynı klasörde tutun: göreli kaynak URL’leri HTML dosyasının bulunduğu konumdan çözülür.

Geniş kaynakta tek bir URL içermesine rağmen srcset kullanılır. picture içinde source, srcset gerektirir; src özniteliğine izin verilmez. Boyut öznitelikleri birimsiz tamsayılardır; bu nedenle width="1200" kullanın, width="1200px" değil. MDN: source öğesi

Hem kaynak hem de yedek için neden boyut belirtmelisiniz?

Yedekteki 600 × 600 boyutları kare kaynağı tanımlar. Geniş kaynaktaki 1200 × 600 boyutları ise geniş kaynağı tanımlar. Her iki boyut çiftini de belirtmek, bu özelliği destekleyen bir tarayıcının görüntüyü indirmeden önce seçilen görüntünün oranlarını belirlemesini sağlar. Geniş kaynak için kare boyutlarını yeniden kullanmak başlangıçta yanlış oranı sağlar. HTML Standardı: Kaynak boyut öznitelikleri

Ardından CSS, yüksekliği otomatik bırakıp görüntü genişliğini kullanılabilir içerik genişliğine ayarlar. Bu otomatik boyut, görüntünün oranlarının yüksekliğini belirlemesini sağlar. CSS boyutlandırma taslak belgesi, tercih edilen en-boy oranının otomatik boyutlandırmada nasıl kullanıldığını açıklar; her iki boyutu da sabit olarak tanımlamak bu esnekliği ortadan kaldırır. CSS Box Sizing Module Level 4

Bu örnekte düzen, küçük bir hesaplamayla denetlenebilir:

image width = min(viewport width - 32, 960)
square height = image width
wide height = image width / 2
CSS pikseli cinsinden görünüm alanı genişliği Seçilen kaynak Hesaplanan görüntü boyutu
500 shapes-square.svg 468 × 468
699 shapes-square.svg 667 × 667
700 shapes-wide.svg 668 × 334
1000 shapes-wide.svg 960 × 480

Bunlar, kaydırma çubuğu genişliğinin kullanılabilir içerik alanını azaltmadığı varsayımıyla, verilen CSS için hesaplanan değerlerdir. SVG sözdizimi, kaynak adları, belirtilen boyutlar ve hesaplamalar program aracılığıyla denetlenmiştir; hazırlık sırasında örnek bir tarayıcıda görüntülenmemiştir.

699px ile 700px arasındaki büyük yükseklik değişikliğine dikkat edin. Bu, kareden geniş kompozisyona geçişin doğrudan sonucudur ve boyutlandırma sırasında beklenen bir durumdur. Görünüm alanı sabitken yüklemeden sonra ikinci bir sıçrama olursa belirtilen boyutları ve bunları geçersiz kılan CSS kurallarını kontrol edin.

Kesme noktasını Safari’de hassas biçimde test edin

Safari’nin Duyarlı Tasarım Modu, sayfa görünüm alanını masaüstü pencerenizden bağımsız olarak yeniden boyutlandırmanızı sağlar. Safari’nin Advanced ayarlarında Show features for web developers seçeneğini etkinleştirin. Örneği açın, ardından Develop > Enter Responsive Design Mode seçeneğini belirleyin veya Control-Command-R tuşlarına basın. WebKit, ayarı, kestirmeyi ve yeniden boyutlandırılabilir önizlemeyi belgeler. WebKit: Basitleştirilmiş Duyarlı Tasarım Modu

Önce 699px ve 700px değerlerini, ardından belirgin biçimde dar ve geniş bir görünüm alanını test edin. Kompozisyonun amaçlanan sınırda değiştiğini, turuncu şeklin daire olarak kaldığını ve görüntünün altındaki paragrafın yüksekliğin değişmesini izlediğini kontrol edin. Boyutlandırmanın yanı sıra başlangıç düzenini de kontrol etmek için kesme noktasının her iki tarafında sayfayı yeniden yükleyin.

Safari’nin hangi dosyayı seçtiğini doğrudan kontrol etmek için, örneği görüntülerken Web Inspector konsolunda aşağıdaki isteğe bağlı tanılama kod parçacığını çalıştırın:

const studyImage = document.querySelector('.study-image');
if (!studyImage) {
  throw new Error('Open the Shape study example before running this snippet.');
}
const studyBox = studyImage.getBoundingClientRect();
console.table({
  selectedURL: studyImage.currentSrc,
  displayedWidth: studyBox.width,
  displayedHeight: studyBox.height
});

Kesme noktasını geçtikten sonra kod parçacığını yeniden çalıştırın. Seçilen URL, ilgili kare veya geniş dosya adıyla bitmelidir. currentSrc özelliği, tarayıcının seçtiği URL’yi bildirir; tek başına bu değer, kaynağın başarıyla yüklendiğini kanıtlamaz. MDN: HTMLImageElement currentSrc özelliği

Geçiş beklendiği gibi çalışmadığında neyi kontrol etmelisiniz?

Seçim, kaynak boyutları ve sunum sırasını izleyin. Böylece CSS boyutlandırma sorununu kaynak seçimi sorunuyla karıştırmazsınız.

  1. Genişlik arttığında kare dosya seçili kalıyor. Görünüm alanının 700px değerine ulaştığını, source öğesinin img öğesinden önce geldiğini ve kaynağın srcset kullandığını doğrulayın. Birden çok kaynak varsa sıralarını inceleyin: koşulu eşleşen önceki bir kaynak öncelik kazanabilir. HTML Standardı: Sanat yönetimi seçimi
  2. Bir kaynak görünmüyor. Biçimlendirmedeki dosya adlarıyla klasördeki dosya adlarını, uzantıları da dahil olmak üzere karşılaştırın. Bu örnekte iki SVG dosyası da index.html dosyasının yanında bulunmalıdır.
  3. Doğru kaynak yanlış biçimde görünüyor. Gerçek img öğesine uygulanan CSS’i, özellikle sabit bir yükseklik atayan kuralları inceleyin. Orantılı boyutlandırma için height: auto ayarını geri yükleyin.
  4. Görüntü yüklendikten sonra sıçrıyor. Belirtilen her boyut çiftini kaynağın gerçek oranıyla karşılaştırın. Ayrıca açık bir CSS aspect-ratio özelliğinin amaçlanan oranları geçersiz kılıp kılmadığını kontrol edin.

Gerçek tasarımınız sabit bir çerçeve gerektiriyorsa sığdırma davranışını bilinçli olarak seçin. object-fit: contain kaynağın tamamını korur ve boş alan bırakabilir; cover çerçeveyi doldurur ve içeriği kırpabilir; fill görüntüyü esnetebilir. Sığdırma özelliklerini img öğesine uygulayın. Bu örnekte düzen, seçilen kaynağın oranlarını izlediği için sabit çerçeve gerekmez. MDN: object-fit

Tarayıcı desteğinin sınırları nelerdir?

picture desteği ile kaynağa özgü boyutların desteği ayrı konulardır. HTML Standardı’nın uyumluluk özeti, güncel tarayıcı motorlarında picture desteğini listeler. MDN, boyut özniteliğini yansıtan kaynak width özelliğinin Aralık 2022’den beri tarayıcılar genelinde kullanılabildiğini belirtir. Eski tarayıcıların kaynağa özgü boyutları doğru biçimde ayıracağı varsayılmamalıdır. HTML Standardı: picture öğesi, MDN: HTMLSourceElement width özelliği

Hiçbir kaynak eşleşmediğinde veya tarayıcı picture desteğine sahip olmadığında, yedek img görüntüyü sağlar. Bu örnekte bu, kare kompozisyondur. Kaynaklar arasında geçiş yapabilen ancak kaynak boyutlarını desteklemeyen bir tarayıcı, geniş görüntünün son oranlarını ancak yükleme sonrasında belirleyebilir. MDN: picture öğesi

Hedef tarayıcı CSS aspect-ratio özelliğini destekliyor ancak açık bir boyutlandırma kuralına ihtiyaç duyuyorsa aşağıdaki CSS parçasını mevcut stil sayfasının sonuna ekleyin. Bu parça HTML kesme noktasını yansıtır ve geçici oranlar sağlar; yüklenen görüntünün doğal oranının devreye girmesine de izin verir:

.study-image {
  aspect-ratio: auto 1 / 1;
}

@media (min-width: 700px) {
  .study-image {
    aspect-ratio: auto 2 / 1;
  }
}

MDN, auto ile oranı birlikte kullanma yöntemini belgeler ve CSS aspect-ratio özelliğinin Eylül 2021’den beri tarayıcılar genelinde kullanılabildiğini belirtir. Dolayısıyla bu parçanın da bir destek sınırı vardır. Kesme noktasını kaynak koşuluyla eşzamanlı tutun ve desteklemeniz gereken tarayıcı sürümlerinde test edin. MDN: aspect-ratio

Örnek doğru çalıştığında sentetik dosyaları kendi kompozisyonlarınızla değiştirin ve boyutlarını birlikte güncelleyin. Kaynak koşulunu, kaynak oranlarını ve CSS boyutlandırmasını tutarlı tutun; ardından kesme noktasının hemen altında ve hemen üstünde kontrolleri tekrarlayın.

Kaynaklar