Tam da bir web geliştirici olmanın heyecanını yaşarken, CSS media queries ve adaptive images konularıyla ilgilenmek, projelerine profesyonel bir dokunuş katmanın önemini kavrıyorsun. İşte bu yazıda, farklı ekran boyutlarına uygun görüntüleri entegre etmenin inceliklerini, CSS media queries kullanarak anlatacağım.
İlk olarak, HTML belgemizde temel yapıyı oluşturmalıyız:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Farklı Ekran Boyutları için Adaptive Images</title>
</head>
<body>
<div class="image-container">
<img src="small-image.jpg" alt="Küçük Görüntü" class="adaptive-image">
</div>
</body>
</html>
Şimdi, CSS dosyamızda media queries’leri kullanarak ekran genişliğine göre görüntüyü değiştireceğiz:
/* Genel stiller */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
.image-container {
text-align: center;
}
.adaptive-image {
width: 100%; /* Görüntü, içerik alanının genişliğine sığacak şekilde genişletilir */
height: auto; /* Oranları koruyarak yüksekliği otomatik olarak ayarlanır */
}
/* Ekran boyutlarına göre görüntü ayarları */
@media only screen and (min-width: 600px) {
.adaptive-image {
content: url('medium-image.jpg'); /* Ekran genişliği 600 piksel veya daha büyükse orta boyuttaki görüntü kullanılır */
}
}
@media only screen and (min-width: 1200px) {
.adaptive-image {
content: url('large-image.jpg'); /* Ekran genişliği 1200 piksel veya daha büyükse büyük boyuttaki görüntü kullanılır */
}
}
Gördüğün gibi, HTML belgemize ekran genişliğine duyarlı bir şekilde adapte olacak şekilde görüntü eklemek için media queries kullanıyoruz. Küçük ekranlarda küçük bir görüntü, orta ekranlarda orta boyutta bir görüntü ve büyük ekranlarda ise yüksek çözünürlüklü bir görüntü gösterilecek.
Bu sayede, web sitenin ziyaretçileri farklı cihazlarda daha iyi bir kullanıcı deneyimi yaşayacaklar. Adaptif görüntüler, projelerini daha profesyonel ve erişilebilir hale getirmek isteyen geliştiriciler için gerçekten önemli bir araçtır. Umarım bu örnekler, bu konudaki anlayışını artırmana yardımcı olur!