Yazar: suat 20 Eylül 2024
Görüntülerin cihaz ekranına uygun olarak yeniden boyutlanmasını sağlamak için yüzde bazlı genişlik kullanabilirsiniz. Örneğin:
<img src="resim.jpg" alt="Açıklama" style="width: 100%; height: auto;">
Bu yöntemde genişlik yüzde üzerinden ayarlandığı için, görüntü her ekran boyutuna uyum sağlayacaktır.
Medya sorguları ile farklı ekran boyutlarına göre özel stiller oluşturabilirsiniz.
@media (max-width: 600px) {
img {
width: 100%;
}
}
@media (min-width: 601px) {
img {
width: 50%;
}
}
Bu sayede küçük ekranlarda görüntü tüm genişliği kaplarken, büyük ekranlarda daha küçük bir alanı kaplar.
Farklı cihazlar için uygun performans ve kalite dengesini sağlamak amacıyla modern resim formatlarını (ör. WebP) kullanabilir ve srcset özelliği ile birden fazla çözünürlükte görüntü tanımlayabilirsiniz.
<img src="resim-default.jpg" srcset="resim-kucuk.jpg 600w, resim-orta.jpg 1200w, resim-buyuk.jpg 1800w" sizes="(max-width: 600px) 100vw, (min-width: 601px) 50vw" alt="Açıklama">
Bu yöntem ile tarayıcı, ekran boyutuna ve çözünürlüğüne en uygun resmi seçer.
Videoları yüzde bazlı bir konteyner içerisinde yerleştirerek duyarlılık sağlayabilirsiniz.
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;">
<iframe src="https://player.vimeo.com/video/123456789" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
Bu yöntem ile videoyu saran div, ekran genişliğine göre uyum sağlarken içindeki iframe de aynı oranda yeniden boyutlanır.
Flexbox kullanarak videoları tarayıcının genişliğine göre dinamik şekilde boyutlandırabilirsiniz.
.video-container {
display: flex;
justify-content: center;
align-items: center;
}
iframe {
width: 100%;
max-width: 800px; /* Maksimum genişlik sınırı */
}
Bu CSS kodlarını kullanarak video konteynerini esnek hale getirmek mümkündür, bu sayede video hem ortalanır hem de belirlediğiniz maksimum boyuta kadar genişler.
Büyük boyutlu videoların yüklenme sürecini optimize etmek için lazy loading kullanabilirsiniz.
<iframe src="https://player.vimeo.com/video/123456789" loading="lazy" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
loading="lazy" özelliği, videonun sayfa yüklendikten sonra görüntülenme anında yüklenmesini sağlar, bu da genel performansı artırır.
Responsive görüntü ve video yerleştirme teknikleri, kullanıcıların çeşitli cihazlarda ve ekran boyutlarında en iyi deneyimi yaşamasını sağlar. Görseller ve videolar, web sayfasının hızını ve performansını etkilemeyen ve her ekran boyutunda düzgün görüntülenen bir yapıda olmalıdır. Bu teknikleri kullanarak, modern ve kullanıcı-dostu web tasarımları oluşturabilirsiniz. Web sitenizin performansını ve kullanıcı memnuniyetini artırmak, özellikle günümüz çok cihazlı dünyasında kritik önem taşır.