Bootstrap Görseller: img-fluid, img-thumbnail, figure ve ratio

Duyarlı görsel: .img-fluid

Bir img ögesi varsayılanda kendi doğal genişliğinde gösterilir; 1600 piksellik bir fotoğraf dar bir telefon ekranında sayfanın dışına taşar. .img-fluid bu sorunu iki bildirimle çözer: max-width: 100% görselin üst ögesinden geniş olmasını engeller, height: auto ise genişlik küçüldükçe yüksekliğin orantılı biçimde ayarlanmasını sağlar. Görsel küçülür ama hiçbir zaman doğal boyutundan büyümez; küçük bir görsel geniş bir kutuda kendi boyutunda kalır.

width ve height özniteliklerini HTML'de yazmaya devam edebilirsiniz; height: auto kuralı yükseklik özniteliğini geçersiz kıldığı için oran bozulmaz. Bootstrap'in Reboot katmanı ayrıca img ve svg ögelerine vertical-align: middle verir; metin satırı içindeki görsellerin hizası bu kuraldan gelir. Duyarlı tasarımın genel kavramı mobil uyumluluk yazısında anlatılıyor.

<img src="manzara-1600.jpg" width="1600" height="900"
     class="img-fluid" alt="Gün batımında sahil şeridi">

<img src="ekip.jpg" width="200" height="200"
     class="img-thumbnail" alt="Destek ekibinin toplu fotoğrafı">

.img-fluid ile .w-100 sık karıştırılır. .w-100 görsele width: 100% verir; görsel kutudan küçük olsa bile kutuyu dolduracak kadar büyütülür ve küçük bir görselde bulanıklık görülebilir. .img-fluid ise yalnızca üst sınır koyar, görseli hiçbir zaman doğal boyutunun üstüne çıkarmaz. Belgedeki carousel örnekleri slayt görsellerinde d-block w-100 birleşimini kullanır, çünkü orada görselin slayt alanını tamamen doldurması istenir. Genel içerik görsellerinde ise .img-fluid daha güvenli varsayılandır. Carousel bileşeni carousel yazısında anlatılıyor.

Küçük resim çerçevesi: .img-thumbnail

.img-thumbnail görsele .25rem iç boşluk, beyaz zemin, 1px açık gri kenarlık ve .25rem köşe yuvarlatma verir; böylece fotoğraf ince bir çerçevenin içinde durur. Belge bu sınıfı kenarlık ve köşe yardımcılarına ek bir seçenek olarak sunar. Önemli bir ayrıntı, sınıfın max-width: 100% ve height: auto değerlerini de içermesidir; yani .img-thumbnail taşıyan bir görsel ayrıca .img-fluid gerektirmeden duyarlı davranır. Bootstrap 5.0.2 derlenmiş CSS dosyasında görsel ve figure sınıfları şöyle tanımlıdır:

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  font-size: 0.875em;
  color: #6c757d;
}

Çerçeveyi değiştirmek için Sass değişkenleri vardır: $thumbnail-padding, $thumbnail-bg, $thumbnail-border-width, $thumbnail-border-color, $thumbnail-border-radius ve $thumbnail-box-shadow. Sonuncusu derlenmiş CSS'te görünmez; scss/_images.scss dosyasında gölge box-shadow() karışımıyla eklenir ve bu karışım yalnızca $enable-shadows açıkken çıktı üretir. Aynı dosyadaki yorum, görsellerin neden varsayılan olarak değil de bir sınıfla duyarlı yapıldığını da açıklar: Bootstrap v2'de tüm görselleri kendiliğinden duyarlı yapmayı denemiş, ancak bu yaklaşım içindeki görsellerin yeniden boyutlanmasını beklemeyen üçüncü taraf bileşenleri, örneğin harita gömmelerini bozduğu için v3'te bırakılmıştır. Yalnızca köşe ya da kenarlık istiyorsanız border ve rounded sınıfları daha esnek bir yol sunar; örneğin profil fotoğrafı için .rounded-circle kullanılır.

Görselleri hizalamak

Belge görselleri hizalamak için üç yol gösterir. Birincisi float sınıflarıdır: .float-start görseli sola, .float-end sağa yaslar ve metin etrafından akar. İkincisi blok görsellerde yatay ortalamadır: görsel varsayılanda satır içi olduğu için önce .d-block ile blok yapılır, sonra .mx-auto ile sol ve sağ boşluk eşitlenir. Üçüncüsü üst ögeye .text-center vermektir; satır içi görsel metin gibi ortalanır. İkinci ve üçüncü yol aynı görünümü verir, ancak ilki ayarı görselin kendisinde tutar, ikincisi ise kutudaki tüm satır içi içeriği, örneğin görselin altındaki kısa bir açıklamayı da ortalar.

<div class="clearfix mb-4">
  <img src="logo-a.png" width="200" height="200" class="rounded float-start" alt="A firması logosu">
  <img src="logo-b.png" width="200" height="200" class="rounded float-end" alt="B firması logosu">
</div>

<img src="rozet.png" width="200" height="200" class="rounded mx-auto d-block mb-4" alt="Kalite rozeti">

<div class="text-center">
  <img src="imza.png" width="200" height="200" class="rounded" alt="Yönetici imzası">
</div>

İlk örnekte iki görsel de yüzdüğü için dış kutu .clearfix alır; aksi halde kutu sıfır yüksekliğe çöker ve sonraki içerik görsellerin yanına kayar. Float ve clearfix davranışı boyut, float ve clearfix yazısında, .mx-auto ise spacing yazısında anlatılıyor. Görünürlük sınıfı .d-block display yazısının konusudur.

picture ögesiyle kullanım

Aynı görselin farklı biçimlerini ya da boyutlarını sunmak için picture ögesi içinde birden fazla source kullanabilirsiniz. Belgenin buradaki tek ama kritik kuralı şudur: .img-* sınıfları picture ögesine değil, içindeki img ögesine verilir. Tarayıcı hangi kaynağı seçerse seçsin sonuç img ögesinde gösterildiği için stillerin de orada olması gerekir.

<picture>
  <source srcset="sema.svg" type="image/svg+xml">
  <img src="sema.png" class="img-fluid img-thumbnail" alt="Sunucu mimarisi şeması">
</picture>

srcset, sizes ve type özniteliklerinin nasıl seçim yaptığı HTML'in konusudur; ayrıntılar için HTML öğrenme rehberine bakabilirsiniz. Her durumda alt metni yazmayı unutmayın; görsel bilgi taşıyorsa içeriği anlatan bir metin, yalnızca süs ise boş bir alt="" uygundur.

Başlıklı görseller: .figure

Bir görselin altına açıklama koymak için HTML'in figure ve figcaption ögeleri kullanılır. Bootstrap bunlara temel stil veren üç sınıf ekler: .figure kapsayıcıyı display: inline-block yapar, .figure-img görselin altına .5rem boşluk ve line-height: 1 verir, .figure-caption ise açıklamayı biraz küçük (.875em) ve soluk gri (#6c757d) gösterir. Belge, figure içindeki görsellerin açık bir boyutu olmadığını hatırlatır ve duyarlı olmaları için .img-fluid eklenmesini ister.

<figure class="figure">
  <img src="panel.jpg" width="400" height="300"
       class="figure-img img-fluid rounded" alt="Yönetim panelinin ana ekranı">
  <figcaption class="figure-caption">Yönetim panelinin ana ekranı.</figcaption>
</figure>

<figure class="figure">
  <img src="grafik.png" width="400" height="300"
       class="figure-img img-fluid rounded" alt="Aylık trafik grafiği">
  <figcaption class="figure-caption text-end">Kaynak: kendi ölçümlerimiz.</figcaption>
</figure>

Açıklamayı hizalamak için metin hizalama sınıflarını kullanırsınız; ikinci örnekteki .text-end açıklamayı sağa yaslar. .figure satır içi blok olduğundan iki figure yan yana gelebilir; tam genişlikte, tek başına durmasını istiyorsanız .d-block ekleyebilirsiniz. Açıklamanın boyutu ve rengi $figure-caption-font-size ve $figure-caption-color değişkenlerinden gelir.

Sabit en boy oranı: .ratio

Ratio yardımcısı iframe, embed, video ve object gibi dış içeriklerin en boy oranını korumak için tasarlanmıştır; belgeye göre div ya da img gibi standart HTML çocuklarında da çalışır. Kullanımı basittir: içeriği .ratio ve bir oran sınıfı taşıyan bir üst ögeyle sararsınız. Varsayılan oranlar .ratio-1x1, .ratio-4x3, .ratio-16x9 ve .ratio-21x9 sınıflarıdır. Stiller üst ögeden doğrudan çocuğa uygulanır; çocuğa ayrı bir sınıf vermeniz gerekmez.

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>

<div class="ratio ratio-1x1 mt-3" style="max-width: 10rem;">
  <div class="bg-light border">1x1</div>
</div>
<div class="ratio ratio-4x3 mt-3" style="max-width: 10rem;">
  <div class="bg-light border">4x3</div>
</div>
<div class="ratio ratio-21x9 mt-3" style="max-width: 10rem;">
  <div class="bg-light border">21x9</div>
</div>

Belgenin bir ipucu: iframe ögelerine frameborder="0" yazmanız gerekmez, çünkü Reboot iframe kenarlığını zaten sıfırlar. Derlenmiş CSS'te bu, iframe { border: 0; } kuralıyla görülür. Resmî örnekte de bulunan title özniteliğini korumak iyi bir alışkanlıktır; çerçevenin ne içerdiğini tanımlar. Çerçeve öznitelikleri ve erişilebilirlik ayrıntıları ARIA rehberinde ve Bootstrap erişilebilirlik yazısında ele alınıyor.

Ratio nasıl çalışıyor?

Ratio yardımcısının arkasında küçük ama zekice bir CSS düzeni vardır. Bootstrap 5.0.2 derlenmiş CSS dosyasında kurallar şöyledir:

.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-1x1 {
  --bs-aspect-ratio: 100%;
}

.ratio-4x3 {
  --bs-aspect-ratio: calc(3 / 4 * 100%);
}

.ratio-16x9 {
  --bs-aspect-ratio: calc(9 / 16 * 100%);
}

.ratio-21x9 {
  --bs-aspect-ratio: calc(9 / 21 * 100%);
}

Üst öge tam genişlik alır ve position: relative olur. ::before sözde ögesi padding-top değerini --bs-aspect-ratio değişkeninden alır. Dikey iç boşluk yüzdeleri ögenin genişliğine göre hesaplandığından, %56,25 değerindeki iç boşluk kutuya tam olarak genişliğin 9/16'sı kadar yükseklik verir. Çocuk öge ise .ratio > * seçicisiyle mutlak konumlandırılır ve bu kutunun tamamını kaplar. Sonuç: pencere daraldıkça genişlik azalır, yükseklik aynı oranda azalır, video hiçbir zaman siyah şeritlerle ya da taşmayla bozulmaz.

Bu mekanizmanın bir yan etkisi vardır: çocuk öge kutuyu tamamen doldurduğu için içeriği oranı aşarsa kırpılmaz, dışarı taşar. Uzun metin içeren bir div ögesini ratio içine koyarsanız metin alttan taşabilir. Bu yüzden ratio, boyutu kutuya uyan medya içeriği için en uygun seçimdir. Bir görseli ratio içine koyduğunuzda ise görsel, kendi oranı farklıysa kutuya sığmak için esneyerek bozulabilir; bu durumda görselin oranıyla aynı oran sınıfını seçmek gerekir.

Özel oranlar: --bs-aspect-ratio

Her oran sınıfı yalnızca --bs-aspect-ratio değişkenini ayarladığı için kendi oranınızı oluşturmak kolaydır: değişkeni doğrudan .ratio ögesinde ezersiniz. Hesap şöyledir: yüksekliği genişliğe bölün ve yüzdeye çevirin. Belgedeki örnekte 2x1 oran için --bs-aspect-ratio: 50% kullanılır. Aynı mantıkla 3x2 oran için yükseklik genişliğin üçte ikisidir; kaynak koddaki biçimi izleyerek calc(2 / 3 * 100%) yazabilirsiniz.

<!-- 2x1: yükseklik genişliğin yarısı -->
<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div class="bg-light border">2x1</div>
</div>

<!-- 3x2: yükseklik genişliğin üçte ikisi -->
<div class="ratio mt-3" style="--bs-aspect-ratio: calc(2 / 3 * 100%);">
  <img src="kapak.jpg" alt="Yazının kapak fotoğrafı">
</div>

Değişken yaklaşımı oranı kırılma noktasına göre değiştirmeyi de kolaylaştırır. Belge, bir kutunun küçük ekranda 4x3 başlayıp md ve üstünde 2x1 olmasını Sass ile şöyle gösterir; parça resmî belgedeki örnektir ve Bootstrap'in mixin dosyaları içe aktarıldıktan sonra derlenmelidir:

// Belgedeki örnek: md ve üstünde 4x3 yerine 2x1
.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}

media-breakpoint-up() karışımı ve kırılma noktaları breakpoint yazısında, CSS değişkenlerinin genel mantığı CSS değişkenleri rehberinde anlatılıyor.

Sass değişkenleri ve oran haritası

Görsel, figure ve ratio ayarlarının tamamı _variables.scss içindedir:

// scss/_variables.scss (v5.0.2)
$thumbnail-padding:                 .25rem !default;
$thumbnail-bg:                      $body-bg !default;
$thumbnail-border-width:            $border-width !default;
$thumbnail-border-color:            $gray-300 !default;
$thumbnail-border-radius:           $border-radius !default;
$thumbnail-box-shadow:              $box-shadow-sm !default;

$figure-caption-font-size:          $small-font-size !default;
$figure-caption-color:              $gray-600 !default;

$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
) !default;

Belge oran haritasından $ratio-aspect-ratios adıyla söz etse de v5.0.2 kaynak kodundaki gerçek ad $aspect-ratios olarak görünür; taşıma notları da v4'teki $embed-responsive-aspect-ratios haritasının $aspect-ratios olarak yeniden adlandırıldığını yazar. Haritaya yeni bir anahtar eklediğinizde, örneğin "3x2": calc(2 / 3 * 100%), derleme sonrası .ratio-3x2 sınıfı üretilir. Değişken ezme düzeni için Sass ile özelleştirme yazısına bakın.

v4'ten geçenler için kısa not: "responsive embed" yardımcıları v5'te ratio yardımcılarına dönüştü. Sınıf adlarındaki by yerini x harfine bıraktı; taşıma notlarındaki örnekle .ratio-16by9 artık .ratio-16x9 olarak yazılır. Çocuk ögeye verilen .embed-responsive-item sınıfı da kaldırıldı, yerine sınıf gerektirmeyen .ratio > * seçicisi geldi. Ayrıntılar Bootstrap 4'ten 5'e geçiş yazısında.

Uygulamalı örnek: görselli blog yazısı

Aşağıdaki parça bir yazı sayfasında bu sınıfların birlikte kullanımını gösterir: tam genişlikte bir şema figure içinde, yazar fotoğrafı yuvarlak ve sola yaslı, eğitim videosu ise 16x9 oranlı bir kutuda.

<article class="container my-4">
  <h1 class="fs-2">Sunucu taşıma rehberi</h1>

  <figure class="figure d-block">
    <img src="tasima-semasi.png" width="1200" height="675"
         class="figure-img img-fluid rounded border" alt="Eski ve yeni sunucu arasındaki veri akışı şeması">
    <figcaption class="figure-caption">Şekil 1: Taşıma sırasında veri akışı.</figcaption>
  </figure>

  <p>
    <img src="yazar.jpg" width="64" height="64"
         class="rounded-circle float-start me-3 mb-2" alt="Yazarın fotoğrafı">
    Yazının giriş paragrafı yazar fotoğrafının sağından akar. Fotoğraf yüzdüğü için
    paragraf kısa kalırsa sonraki öge onun yanına kayabilir; gerekirse üst ögeye clearfix verin.
  </p>

  <div class="ratio ratio-16x9 my-4">
    <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="Taşıma adımlarını anlatan video" allowfullscreen></iframe>
  </div>
</article>

Şemanın figure ögesine .d-block verilmesi, satır içi blok olan .figure kapsayıcısının yazının tüm genişliğini kullanabilmesi içindir; .img-fluid sayesinde şema kapsayıcıdan geniş olduğunda küçülür. Yazar fotoğrafında .rounded-circle kare görseli daireye çevirir ve .float-start paragrafın onun etrafından akmasını sağlar. Video kutusu ise sayfa genişliği ne olursa olsun 16x9 oranını korur.

Sık yapılan hatalar

• Sınıfı picture ögesine vermek: .img-fluid ve .img-thumbnail içteki img ögesine yazılır.
• Figure görselinde .img-fluid unutmak: figure içindeki görselin açık bir boyutu yoktur; büyük görsel kutudan taşar.
• Ratio çocuğuna sınıf aramak: v4'teki .embed-responsive-item yoktur; .ratio > * seçicisi doğrudan çocuğu biçimlendirir.
• Eski oran adları: .ratio-16by9 değil .ratio-16x9 yazılır.
• Görseli .mx-auto ile ortalayamamak: önce .d-block ile blok yapın; satır içi ögede otomatik dış boşluk ortalama yapmaz.
• Ratio içine uzun metin koymak: çocuk öge kutuyu sabit oranla doldurur, fazla içerik taşar.
• alt metni atlamak: Bootstrap sınıfları erişilebilirliği sağlamaz; anlamlı görselde açıklayıcı alt yazın.

Sık Sorulan Sorular

Bootstrap'te görseli mobilde küçültmek için ne yapmalıyım?

Görsele .img-fluid sınıfı verin. Görsel üst ögesinden geniş olamaz ve yüksekliği orantılı biçimde ayarlanır. Görsel kart ya da grid sütunu içindeyse o kutunun genişliğini referans alır.

YouTube videosunu duyarlı nasıl gömerim?

iframe ögesini <div class="ratio ratio-16x9"> içine alın. Çerçeve kutuyu tamamen kaplar ve pencere daraldıkça oranını koruyarak küçülür; frameborder özniteliğine gerek yoktur.

.img-thumbnail ile .img-fluid birlikte gerekli mi?

5.0.2 derlenmiş CSS dosyasında .img-thumbnail zaten max-width: 100% ve height: auto içerir, bu yüzden tek başına da duyarlıdır. Belgedeki picture örneği ikisini birlikte gösterir; birlikte yazmak zararsızdır.

Hazır oranlar dışında bir oran kullanabilir miyim?

Evet. .ratio ögesine style="--bs-aspect-ratio: 50%;" gibi bir değer verin. Değer, yüksekliğin genişliğe oranının yüzde karşılığıdır. Sık kullanacağınız bir oranı Sass ile $aspect-ratios haritasına ekleyerek sınıf hâline de getirebilirsiniz.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Kenarlık ve köşe sınıfları · Boyut ve float sınıfları · Bootstrap card bileşeni · Bootstrap carousel · Bootstrap breakpoint