HTML5 Picture Ve Source Etiketi Kullanımı - Tasarım Kodlama

• Ana Sayfa
• Algoritma
  • Scratch Örnekleri
• Programlama
  • Android
  • C#
    • C# Console
    • C# Windows Form
    • C# WPF
  • C++
  • C
  • Java
  • Kotlin
  • Dart
  • Python
  • PHP
  • JavaScript
  • Go Programlama
  • R Dili
  • Matlab
  • Scala
  • Fortran
• Veritabanı
  • Oracle
  • SQL Server
  • MySQL
  • SQLite
  • Access
• Web Tasarımı
  • HTML
  • CSS
  • Bootstrap
  • JavaScript
  • Jquery
  • Vue.js
  • PHP
  • ASP.NET
  • HTML5 Canvas
• Grafik
  • Adobe Fireworks
• Genel
  • Bilişim
    • Web 2.0 Araçları
    • Bilişim Teknolojileri
    • Ofis Programları
      • Word
      • Excel
      • Power Point
  • Teknik Terimler
  • Hesaplama
  • Teknoloji
  • Oyun
  • Yazılım
  • Linux
  • Pardus
  • Raspberry Pi
  • Windows

HTML5 ile hayatımıza giren yeni etiketlerden bir tanesi de <picture> ve <source> etiketleri olmuştur.

Bu etiketleri kullanarak farklı medya sorguları oluşturabiliyoruz.

<picture> etiketi tanımlayıp, her ekran boyutuna göre farklı <source> etiketleri tanımlaması yapıyoruz.

Tarayıcının tanımaması durumuna bağlı olarak da <img> etiketi tanımlamasını sona ekleyerek farklı ekran çözünürlüklerinde farklı boyutlarda resimler gösterme fırsatımız ortaya çıkıyor.

Yukarıda gördüğünüz ekran görüntüsünde tarayıcı boyutu değiştirildiğinde sayfadaki resim boyutunun uygun bir şekilde ayarlanması sağlanmaktadır. Bu işlem için aşağıdaki kodları yazmanız yeterli olacaktır.

Uyarı : Örnekte kullanılan yildirim-800w.png, yildirim-480w.png ve yildirim-320w.png resim dosyalarının isimleridir. Örneği yaparken siz de kendi resim dosyalarınızın adını  kullanmayı unutmayın.

<picture> <source media="(min-width: 800px)" srcset="yildirim-800w.png"> <source media="(min-width: 480px)" srcset="yildirim-480w.png"> <source media="(min-width: 320px)" srcset="yildirim-320w.png"> <img src="yildirim-800w.png" alt="Flowers" style="width:auto;"> </picture>

12345678

<picture><source media="(min-width: 800px)"srcset="yildirim-800w.png"><source media="(min-width: 480px)"srcset="yildirim-480w.png"><source media="(min-width: 320px)"srcset="yildirim-320w.png"><img src="yildirim-800w.png"alt="Flowers"style="width:auto;"></picture>

EtiketlerHTML5 ile CSS Kullanmadan Resim Boyutu Ayarlama HTML5 ile picture ve source Etiketleri Kullanımı HTML5 Örnekleri HTML5 Resim Boyutlandırma HTML5 Resmi Sayfaya Göre Boyutlandırma

Bunları da beğenebilirsiniz

CSS • HTML

CSS Flex ile Basit Sayfa Tasarımı

Aralık 20, 2024 HTML

HTML Bağlantı (Anchor) Etiketi: Web Sayfalarına Etkileşim Verme

Ekim 17, 2024 HTML

HTML Liste Kullanımı ve Örnekleri

Eylül 28, 2024

Yorum Yap

Yorum yapmak için tıklayın

İptal Et

Yorum

Ad *

E-posta *

İnternet sitesi

Δ

HTML Tablo Örnekleri – Kimlik Kartı Oluşturma CSS Paralax Sayfa Tasarımı Yorum

PaylaşFacebookXRedditEmailWhatsApp

• Algoritma
• Android
• Arduino
• C
• C#
• C++
• Go Programlama
• Grafik
• Java
• Kotlin
• Access
• MySQL
• ASP.NET
• CSS
• JavaScript
• PHP
• Python
• Scala