Genişlik ve Yükseklik

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 37 / 76.

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

width ve height özelliklerini kullanmanın temel söz dizimi şö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: Piksel (px), em (em), yüzde (%) veya diğer geçerli CSS birimleriyle belirtilebilen istenen genişlik veya yükseklik değeri. Tarayıcının genişlik veya yüksekliği içeriğe göre otomatik olarak hesaplamasını sağlamak için auto anahtar sözcüğünü de kullanabilirsiniz.

Örneğin:

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

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

Bu örnekte, tüm <div> öğelerinin genişliği 300px ve yüksekliği 200px iken, tüm <img> öğelerinin genişliği üst öğelerinin genişliğinin %100'ünü kaplar ve yüksekliği en-boy oranını koruyacak şekilde otomatik olarak hesaplanır.

Görev

Kolay

Bir <div> ve bir görsel (<img>) içeren bir HTML belgeniz var. 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.

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>