Görselin Boyutunu Değiştirmek

HTML Dersleri > Görselin Boyutunu Değiştirmek

Bir önceki dersimizde sitemize görsel eklemek için <img> etiketini görmüştük. Eğer iki dersi ard arda okumadıysanız bir önceki dersi tekrar ettikten sonra bu derse tekrardan dönmenizi tavsiye ederiz.

Görselimizin boyutunu değiştirmek için iki tane nitelik değerine sahibiz bunlardan birisi genişlik yani width diğeri ise yükseklik yani height'dir.

Görselimizin boyutunu değiştirmeden önce görselimizin orjinal halini aşağıdaki örnekte gözlemleyelim.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Kabe</title>
  </head>
  <body>
    <img src="https://hakkod.com/gorseller/kabe.jpg">
  </body>
</html>

Gördüğünüz gibi görselin boyutu çok büyük bu yüzden ekrandan taşıyor. Bunun için ilk önce görselimizin yatayda kapladığı alanı yani genişliğini değiştirelim. Görselimizin genişliğini değiştirmek için width niteliğini kullanırız.

Pekiştirme: Niteliklerin mantığı çok basittir.

1. Adım: İlk önce etiket oluşturulur.

<img>

2. Adım: Niteliğin adı açılış etiketinin içerisine girilir.

<img width>

3. Adım: Nitelik adından sonra eşittir (=) işareti konulur.

<img width=>

4. Adım: Eşittir (=) işaretinden sonra iki tane çift tırnak ("") konulur.

<img width="">

5. Adım: Son olarak niteliğin değeri çift tırnaklar içerisine girilir. <img> etiketi için width niteliğinin değeri görselin genişliğidir. Yani yatayda kapladığı alandır.

<img width="200">

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Kabe</title>
  </head>
  <body>
    <img width="200" src="https://hakkod.com/gorseller/hakkod.png">
  </body>
</html>

Gördüğünüz gibi görselimizin yatayda kapladığı alan azalmış oldu. Farkettiyseniz görselimizin sadece yatayda kapladığı alanı ayarladık. Dikeyde kapladığı alanı yani uzunluğunu ayarlamadık. Buna rağmen tarayıcı otomatik olarak görselimizin yüksekliğini ayarladı.

Görselimizin dikeyde kapladığı alanı yani yüksekliğini ayarlamak istersek o zaman height niteliğini kullanırız.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Kabe</title>
  </head>
  <body>
    <img height="200" src="https://hakkod.com/gorseller/hakkod.png">
  </body>
</html>

Gördüğünüz gibi bu sefer de görselimizin genişliği otomatik olarak tarayıcı tarafından ayarlandı.

Eğer görselimizin hem genişliğini hem de yüksekliğini biz ayarlamak istersek o zaman iki niteliği de aynı anda kullanmamız gerekir. Bunun için width ve height niteliklerini aynı anda kullanırız. Eğer width ve height nitelik değerlerini aynı sayı verirseniz görseliniz kare şeklinde olacaktır.

Görselimizi kare formatında göstermek için iki nitelik değerini de ayarlamamız gerekir. Çünkü sadece bir uzunluğu kendimiz ayarlarsak diğer uzunluğu tarayıcı otomatik olarak ayarlar. Üstdeki örneklerde gördüğünüz gibi sadece genişliği ayarladığımızda tarayıcı otomatik olarak yüksekliği ayarladı. Sadece yüksekliği ayarladığımızda ise tarayıcı otomatik olarak genişliği ayarladı.

Şimdiki örneğimizde her iki uzunluğuda biz ayarlayalım ve görselimizi kare formatında gösterelim. Bunun için width ve height değerlerinin aynı olmasına dikkat edelim.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Kabe</title>
  </head>
  <body>
    <img width="200" height="200" src="https://hakkod.com/gorseller/hakkod.png">
  </body>
</html>

Gördüğünüz gibi görselimiz kare formatında olmuş oldu. Eğer görselimizi dikdörtgen şeklinde ayarlamak istersek o zaman uzunluklardan birisini diğerinden biraz daha fazla girmemiz gerekir.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Kabe</title>
  </head>
  <body>
    <img width="400" height="200" src="https://hakkod.com/gorseller/hakkod.png">
  </body>
</html>

Gördüğünüz gibi görselimiz dikdörtgen şeklinde oldu.

Önceki Ders

Sonraki Ders