Görseller ve smart fit

Çoğu slider'ın telefonda yanlış görünmesinin sebebi arka plan görselleridir: geniş bir fotoğraf uzun bir kutuda ortalanır ve soldaki kişi kaybolur. Insigne bunu kaynağında çözer.

Arka planlar gerçek görsel

Herhangi bir <img>, <picture> veya <video>'yu data-bg ile slayt arka planı olarak işaretleyin:

<div>
  <img data-bg src="ekip.jpg" alt="Ofiste ekibimiz" data-focus="25% 40%">
  <h2>Üstte içerik</h2>
</div>

Görsellerin size verdiği her şey sizde kalır: alt, srcset / sizes, <picture> ile art direction, loading, decoding, SEO. Bir slayt görselin kendisi de olabilir: <insigne-slider><img src=…><img src=…></insigne-slider>.

Odak noktası

data-focus="x% y%" (veya left, center, right, top, bottom) önemli olan noktadır. Slider kırpımı ona göre ortalar ve kadrajdan çıkmasına asla izin vermez. Ken Burns onun etrafında yakınlaşır.

Güvenli alan

data-safe="sol üst genişlik yükseklik" (görselin yüzdesi), tamamen görünür kalması gereken bir dikdörtgendir: bir ürün, bir yüz, fotoğrafa basılmış bir başlık. Varsayılan fit: "smart" ile:

1. Görsel slaytı cover gibi kaplar ve güvenli alan içeride kalacak şekilde konumlanır.
2. Güvenli alan cover ölçeğinde sığmıyorsa tam gerektiği kadar uzaklaşır.
3. Açıkta kalan alan aynı görselin bulanık kopyasıyla (backdrop: "blur"), bir renkle (backdrop: "#111") veya hiçbir şeyle ("none") doldurulur.

<style>
  .row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
  .row > div { flex: 1 1 160px; }
  .row p { font: 13px/1.4 system-ui; color: #6b6860; margin: 8px 0 0; }
</style>
<div class="row">
  <div>
    <div data-insigne data-height="320" data-fit="cover" data-arrows="hidden" data-pagination="none">
      <div><img data-bg src="/img/subject.svg" alt=""></div>
    </div>
    <p>fit: cover (centered)</p>
  </div>
  <div>
    <div data-insigne data-height="320" data-arrows="hidden" data-pagination="none">
      <div><img data-bg src="/img/subject.svg" alt="" data-focus="20% 55%"></div>
    </div>
    <p>data-focus="20% 55%"</p>
  </div>
  <div>
    <div data-insigne data-height="320" data-arrows="hidden" data-pagination="none" style="max-width:200px">
      <div><img data-bg src="/img/subject.svg" alt="" data-safe="8 18 34 64"></div>
    </div>
    <p>data-safe="8 18 34 64"</p>
  </div>
  <div>
    <div data-insigne data-height="320" data-arrows="hidden" data-pagination="none" style="max-width:150px">
      <div><img data-bg src="/img/subject.svg" alt="" data-safe="0 0 60 100"></div>
    </div>
    <p>Safe area wider than the frame: zooms out, blurred fill</p>
  </div>
</div>

Önizleme yükleniyor…

Canlı önizlemePlayground'da düzenle →

Aynı yerleşim WebGL geçişlerinde de kullanılır; bir shader asla DOM'dan farklı kırpmaz.

Fit modları

fit	Davranış
smart (varsayılan)	Cover, ama odak noktasını ve güvenli alanı asla kesme.
cover	Klasik cover, odak noktasına göre ortalı.
contain	Görselin tamamı, etrafında dolgu.

Tüm slider için, slayt bazında (slayt üzerinde data-fit) veya görsel bazında ayarlayın.

Hiç kırpmamak

height="image" her slayta kendi arka planının tam oranını verir. Bkz. responsive.

Art direction

<picture> arka plan olarak çalışır: kaynağı tarayıcı seçer, smart fit yerleştirir.

<!-- <picture> works as a background: the browser picks the source, smart fit places it. -->
<insigne-slider pagination="none" arrows="hidden" loop="off">
  <div>
    <picture data-bg data-focus="50% 40%">
      <source media="(max-width: 600px)" srcset="https://picsum.photos/id/1011/800/1000">
      <img src="https://picsum.photos/id/1011/1800/1000" alt="Woman in a canoe on a lake">
    </picture>
  </div>
</insigne-slider>

Lazy loading

data-src / data-srcset kullanın (<source> üzerinde de). Görseller, slaytları aktif olandan preload slayt uzaklıktayken yüklenir (varsayılan her iki yanda 1). lazy: false ile her şey hemen yüklenir.

<img data-bg data-src="buyuk.jpg" data-srcset="buyuk-800.jpg 800w, buyuk-1600.jpg 1600w" sizes="100vw" alt="">

Video arka planlar

<video data-bg src="dongu.mp4" poster="dongu.jpg"></video>

Videolar sessiz, döngülü ve satır içi oynar; yalnızca slaytları aktif ve görünürken çalışır. poster WebGL geçişlerinde kullanılır.

Ken Burns

kenBurns: "zoom-out" | "zoom-in" | "pan-left" | "pan-right" | "pan-up" | "pan-down" | "diagonal" | "alternate"; slider bazında veya slayt bazında data-ken-burns ile. kenBurnsDuration ve kenBurnsScale ile ayarlayın. Hareket azaltmada kapalıdır.