Görsele doğru HTML width ve height niteliklerini ekleyin, ardından görüntülenen genişliğini duyarlı, yüksekliğini otomatik yapmak için CSS kullanın. Boyutlar, görseli görüntüleme boyutuna kilitlemeden önceden en-boy oranı sağlar. MDN: Çoklu ortam görselleri

Bu kılavuz, bir görselin kapsayıcısına göre yeniden boyutlanmasını ve yüklenmeden önce orantılı alan ayrılmasını isteyen, Mac'te bir HTML sayfasını düzenleyen kişiler içindir. Örnekte kendi içinde tamamlanan soyut bir grafik kullanılıyor; böylece bir dosya indirmeden boyutlandırma davranışını deneyebilirsiniz.

Boyutlar, görüntüleme boyutunu sabitlemeden nasıl alan ayırabilir?

Bir görselin 1200'e 800 gibi kaynak boyutları ve sayfa düzeninin belirlediği görüntüleme boyutu vardır. Bu değerler farklı olabilir. HTML boyut nitelikleri boyutlandırma ipuçları sağlar; stil sayfanız görüntülenen genişlik ve yüksekliği geçersiz kılabilir. HTML Standardı ayrıca bu nitelikleri auto 1200 / 800 biçiminde bir tercih edilen en-boy oranına dönüştürür. HTML Standardı: gömülü içerik ve görseller için nitelikler

1200'e 800 boyutlarındaki bir kaynak için oran 3:2'dir. Sayfa düzeni görüntülenen genişliği belirlediğinde tarayıcı, kaynak yüklenmeden önce orantılı yüksekliği hesaplayabilir. MDN, görsellerden kaynaklanan sayfa düzeni kaymalarını azaltmak için duyarlı CSS ile birlikte her iki boyutun da belirtilmesini önerir. MDN: Çoklu ortam görselleri

Pratikte görev paylaşımı basittir: HTML kaynağın boyutlarını, CSS ise sayfaya nasıl sığacağını tanımlar. Bu tanımların birbiriyle tutarlı olmasını sağlayın. Görsel özgün boyutunda hiç görüntülenmeyecek olsa bile boyutları belirtmek yararlıdır.

Görselin kapsayıcısını doldurup doldurmayacağını seçin

Görselin kullanılabilir kapsayıcı genişliğini doldurması gerekiyorsa aşağıdaki CSS parçasını kullanın. Görselin responsive-image sınıfına ve doğru boyut niteliklerine sahip olduğu varsayılır:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
}

Görselin gerektiğinde küçülmesi, ancak daha fazla alan olduğunda belirtilen genişliğini koruması gerekiyorsa şu alternatif parçayı kullanın:

.responsive-image {
  display: block;
  max-width: 100%;
  height: auto;
}

İkinci kalıp, görseli daha dar bir kapsayıcının sınırları içinde tutmak için MDN'nin belgelediği yaklaşımdır. Bu basit düzende width: 100% kapsayıcıyı doldururken max-width: 100% bir üst sınır belirler. Yükseklik HTML'de belirtilen değerde kalmak yerine orana göre ayarlanabilsin diye her iki kalıpta da height: auto kullanın. MDN: Çoklu ortam görselleri

Mac'inizde duyarlı görseller içeren eksiksiz bir sayfayı deneyin

TextEdit'i açın, File > New seçeneğini, ardından Format > Make Plain Text seçeneğini seçin. Aşağıdaki belgenin tamamını yapıştırın. Dosyayı shape-demo.html adıyla kaydedin; TextEdit hangi uzantıyı kullanacağınızı sorarsa Use .html seçeneğini seçin. Bunlar, HTML dosyası oluşturmak için Apple'ın belgelediği adımlardır. Apple: Mac'te TextEdit ile HTML belgeleriyle çalışma

Belge, CSS'ini ve özgün bir daire ve dikdörtgen kompozisyonu içeren kodlanmış bir SVG'yi barındırır. Yüklemeniz gereken başka dosya veya paket yoktur. Kaynakta ve görsel öğesinde 1200'e 800 boyutları belirtilmiştir.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape sizing demo</title>
  <style>
    body {
      margin: 0;
      padding: 24px;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
      color: #24343b;
    }

    main {
      max-width: 900px;
      margin: 0 auto;
    }

    .responsive-image {
      display: block;
      width: 100%;
      height: auto;
      background: #edf2f4;
    }
  </style>
</head>
<body>
  <main>
    <h1>Shape study A</h1>
    <p>Resize the window to change the composition's displayed size.</p>
    <img
      class="responsive-image"
      width="1200"
      height="800"
      alt="A blue circle beside an amber rounded rectangle."
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Crect width='1200' height='800' fill='%23edf2f4'/%3E%3Ccircle cx='360' cy='400' r='180' fill='%234b8090'/%3E%3Crect x='660' y='220' width='300' height='360' rx='40' fill='%23d6a96b'/%3E%3C/svg%3E">
    <p>Marker B: this paragraph follows the image in normal document flow.</p>
  </main>
</body>
</html>

Kaydedilen dosyayı tarayıcınızda açıp pencereyi daraltın. Kompozisyon orantılı olarak küçülmeli ve Marker B altında kalmalıdır. Pencereyi genişlettiğinizde, örnekteki kapsayıcı 900 piksellik maksimum genişliğine ulaşana kadar kompozisyon büyür. Bu maksimum, örnek amaçlı bir sayfa tasarımı tercihidir; alan ayırma tekniğinin gereği değildir.

Gömülü kaynak hemen yüklenir; bu nedenle örnek, gözle görülür biçimde geciken bir indirme yerine duyarlı boyutlandırmayı gösterir. Kodlanmış SVG Python ile ayrıştırıldı ve boyutları denetlendi; aşağıdaki hesaplamalar da çalıştırıldı. Hazırlık sırasında tarayıcıda görüntüleme denenmedi.

Sayfayı başka bir kaynağa uyarlamak için src değerini değiştirin ve her iki HTML boyutunu da bu kaynakla eşleşecek şekilde güncelleyin. Bu niteliklerde 1200px yerine 1200 gibi birimsiz tam sayılar kullanın. MDN, görsel boyutları için bu biçimi belirtir. MDN: Görsel gömme öğesi

Tarayıcı ne kadar alan ayırmalı?

Görselde kenarlık veya dolgu olmayan bu basit düzende beklenen yüksekliği şöyle hesaplayın:

görüntülenen yükseklik = görüntülenen genişlik × kaynak yüksekliği ÷ kaynak genişliği

Örnekteki 1200'e 800 boyutları şu örnek sonuçları verir. Genişlikler, tarayıcı penceresinin tamamını değil, görselin içerik kutusunu ifade eder.

Görüntülenen görsel genişliği Orantılı yükseklik
300 CSS pikseli 200 CSS pikseli
600 CSS pikseli 400 CSS pikseli
900 CSS pikseli 600 CSS pikseli

Bu hesaplama aynı zamanda yararlı bir tanılama aracıdır. Gerçek kaynak 1200'e 800 boyutlarında, ancak HTML'de yanlışlıkla 1200'e 600 olarak belirtilmiş olsun. Görüntülenen genişlik 600 piksel olduğunda belirtilen oran 300 piksel yükseklik verir; gerçek oran ise 400 piksel gerektirir. Doğal oran kullanılabilir hâle geldiğinde 100 piksellik olası bir düzeltme oluşur.

Bu düzeltme, oran ipucunun auto kısmından kaynaklanır: doğal en-boy oranına sahip bir görsel, bu oran kullanılabilir olduğunda onu kullanır. Dolayısıyla stil sayfası doğru olsa bile niteliklerin doğru olması önemlidir. CSS belirtimi, sağlanan oran ile yerine geçen bir öğenin doğal oranı arasındaki bu farkı tanımlar. CSS Box Sizing Module Level 4: tercih edilen en-boy oranları

Bunun yerine CSS aspect-ratio'yu ne zaman kullanmalısınız?

Sayfa düzeni görsel kutusunun şeklini bilerek belirliyorsa açık bir CSS oranı kullanın. Örneğin kare bir kutucuk, 3:2 kompozisyonun tamamını orantılı olarak görüntülemekten farklı bir gereksinimdir.

Aşağıdaki CSS parçası, eksiksiz örnektekinin yerine kullanılabilir. Mevcut .responsive-image kuralını bununla değiştirin:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #edf2f4;
}

Burada aspect-ratio: 1 / 1 kare bir kutu ister. Genişlik duyarlı kalır ve otomatik yükseklik bu genişlikten hesaplanır. Tercih edilen en-boy oranının boyutlandırmayı etkilemesi için en az bir boyutun otomatik olması gerekir; her iki boyutun da açıkça ayarlanması bu işlevi ortadan kaldırır. MDN: aspect-ratio

object-fit: contain bildirimi, kompozisyonun tamamını kare kutunun içinde görünür tutar; şekillerin kaynağının doldurmadığı yerlerde boşluk bırakır. Değeri cover olarak değiştirmek kareyi doldurur, ancak kompozisyonun bir kısmını kırpar. Bu davranışı bilinçli olarak seçin: kırpma, görselin anlamlı kısımlarını kaldırabilir. MDN: object-fit

Geçici bir oranın kaynağın doğal oranına yerini bırakması gerekiyorsa CSS, aspect-ratio: auto 3 / 2 gibi bir değeri de destekler. Kaynak farklıysa bu, yükleme sonrasında kutunun oranını değiştirebilir. auto içermeyen bir oran ise sayfa düzeninin tercih ettiği şekli ifade eder. CSS Box Sizing Module Level 4: tercih edilen en-boy oranları

Görsel hâlâ kayıyor veya esniyorsa neleri kontrol etmelisiniz?

Kaynağı ve sayfa düzenini şu sırayla kontrol edin:

  1. Her iki HTML boyutunu da doğrulayın. Kaynağı doğru tanımlamalıdırlar. Doğru genişliğin yanlış yükseklikle eşleştirilmesi yine de yanlış bir oran sağlar.
  2. Uygulanan CSS yüksekliğini kontrol edin. Orantılı örnekte bu değer auto olmalıdır. Başka bir eşleşen kural sabit bir yükseklik atıyor olabilir.
  3. Görüntülenen genişliği kontrol edin. Alan ayırma hesabı, sayfa düzeninin belirlediği genişliğe bağlıdır. Tarayıcıyı yeniden boyutlandırmak bu genişliği ve orantılı yüksekliği kasıtlı olarak değiştirir.
  4. Açık oran kurallarını kontrol edin. Kare bir CSS oranı ile doğal 3:2 oranı, farklı boyutlandırma amaçlarını ifade eder.
  5. Görselin sığdırılmasını ayrıca kontrol edin. contain ve cover, kaynağın kutusuna nasıl sığacağını belirler; kutunun eksik boyutlarını sağlamaz.

Bu kontroller, öğenin kutusu, tercih edilen oranı ve içinde görüntülenen kaynak arasındaki ayrıma dayanır. MDN'nin en-boy oranı kılavuzu, açık boyutların orantılı boyutlandırmayı nasıl etkilediğini açıklar; object-fit başvuru sayfası ise sığdırma ve kırpmayı belgeler. MDN: En-boy oranlarını anlama ve ayarlama, MDN: object-fit

Tarayıcı desteğinin de bir sınırı vardır. MDN, CSS aspect-ratio özelliğinin Eylül 2021'den bu yana tarayıcılar arasında yaygın biçimde kullanılabildiğini belirtir. Bu, eski tüm tarayıcılarda desteklendiği anlamına gelmez ve her HTML boyut eşleme davranışı için bir uyumluluk tarihi de değildir. Gereksinimleriniz eski bir tarayıcıyı kapsıyorsa belgelerdeki uyumluluk bilgilerini kontrol edin. MDN: aspect-ratio

Sıradan orantılı görsel kullanımında doğru HTML boyutları ve duyarlı CSS ile başlayın. Sayfanın belirli bir kutu şekline ihtiyacı varsa açık bir CSS oranı kullanın. Bu tercihler birlikte, görüntülenen boyutun sayfa düzenine uyum sağlamasına izin verirken istenen alanı ayırmanızı sağlar.

Kaynaklar