Web tasarımında, sayfaların boyutlandırılması ve düzenlenmesi önemli bir rol oynar. Bu bağlamda, CSS’de width ve max-width özellikleri, sayfa elemanlarının genişlik ayarlamalarında önemli bir rol oynar. İşte bu özellikleri anlamak ve kullanmak için örnek kod blokları içeren bir rehber:
width Özelliği:
width özelliği, bir elemanın genişliğini belirlemek için kullanılır. Bu özellik, sabit bir genişlik değeri, yüzde cinsinden genişlik değeri veya diğer uzunluk birimleriyle kullanılabilir.
.container {
width: 80%; /* Yüzde cinsinden genişlik belirleme */
max-width: 1200px; /* Maksimum genişlik sınırlama */
margin: 0 auto; /* Merkezlemek için margin kullanma */
}
.image {
width: 100%; /* İçinde bulunduğu container'a göre genişlik alır */
height: auto; /* Oranları koruyarak genişliği ayarlar */
}
Yukarıdaki örnekte, .container adlı bir div’in genişliği yüzde 80 olarak belirlenmiş ve max-width ile 1200 pikselden fazla genişlememesi sağlanmıştır. Ayrıca, bu container içindeki bir resim (img elementi) yüzde 100 genişlik alacak şekilde ayarlanmış ve height: auto kullanılarak oranları korunmuştur.
max-width Özelliği:
max-width özelliği, bir elemanın maksimum genişliğini belirlemek için kullanılır. Bu özellik, elemanın genişliğini belirli bir değeri aşamayacak şekilde sınırlar.
.container {
max-width: 1200px; /* Maksimum genişlik sınırlama */
margin: 0 auto; /* Merkezlemek için margin kullanma */
}
.text-box {
width: 90%; /* Yüzde cinsinden genişlik belirleme */
max-width: 600px; /* Maksimum genişlik sınırlama */
margin: 0 auto; /* Merkezlemek için margin kullanma */
}
Bu örnekte, .container adlı bir div’in maksimum genişliği 1200 piksel olarak sınırlanmıştır. Ayrıca, içindeki bir metin kutusu (div elementi) genişliği yüzde 90 olarak belirlenmiş ve max-width ile 600 pikselden fazla genişlememesi sağlanmıştır.
width ve max-width özelliklerini doğru bir şekilde kullanmak, sayfa düzenlemesini daha esnek ve kullanıcı dostu hale getirebilir. Bu özellikleri kullanarak, farklı ekran boyutlarına ve cihazlara uygun tasarımlar oluşturabilirsiniz.
