Genişlik ve Yükseklik

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 37 / 76.

CSS'de, width ve height özellikleri bir öğenin içerik alanının boyutlarını ayarlamak için kullanılır. Bu özellikler, web sayfalarınızdaki öğelerin boyutunu ve düzenini kontrol etmek için temel öneme sahiptir.

width ve height özelliklerini kullanmak için temel sözdizimi şöyledir:

selector {
    width: value;
    height: value;
}

width: Öğenin içerik alanının genişliği.

height: Öğenin içerik alanının yüksekliği.

value: İstenen genişlik veya yükseklik değeri; piksel (px), em (em), yüzde (%) veya diğer geçerli CSS birimleri cinsinden belirtilebilir. Tarayıcının genişliği veya yüksekliği içeriğe göre otomatik olarak hesaplamasına izin vermek için auto anahtar kelimesini de kullanabilirsiniz.

Örneğin:

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

Bu örnekte, tüm <div> öğeleri 300px genişliğe ve 200px yüksekliğe sahiptir; tüm <img> öğeleri ise üst öğelerinin genişliğinin %100'ünü kaplayan bir genişliğe ve en boy oranını korumak için otomatik olarak hesaplanan bir yüksekliğe sahiptir.

Görev

Kolay

Bir bölme (<div>) ve bir resim (<img>) içeren bir HTML belgesi size verilmiştir. Göreviniz, bu öğelerin boyutlarını ayarlamak için width ve height özelliklerini kullanmaktır. Aşağıdaki adımları izleyin:

<div> öğesini hedefleyen bir CSS kuralı yazın. width değerini 400px ve height değerini 250px olarak ayarlayın.
<img> öğesini hedefleyen bir CSS kuralı yazın. width değerini 300px ve height değerini auto olarak ayarlayın.

Kopya kağıdı

width ve height özellikleri, bir öğenin içerik alanının boyutlarını kontrol eder:

selector {
    width: value;
    height: value;
}

Değerler piksel (px), em (em), yüzde (%) cinsinden belirtilebilir veya otomatik hesaplama için auto kullanılabilir:

div {
    width: 300px;
    height: 200px;
}

img {
    width: 100%;
    height: auto;
}

Kendin dene

<html>
<head>
    <title>Width and Height</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div style="border:2px solid black;">This is a division.</div>
    <img src="https://img.freepik.com/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-54865.jpg" alt="Image">
</body>
</html>