Bir web sitesinde yer alan görsellerin belli bir boyut doğrultusunda görüntülenmesi, özellikle profesyonel bir görünüm açısından oldukça önem arz etmektedir. Örneğin, web sitenizdeki görsellerin boyutlarını (yükseklik ve genişlik değerleri) belli bir oranda belirlemediniz. Bu durumda yapılabilecek, otomatik bir yöntem mevcut mu? Elbette, CSS yardımı ile otomatik fotoğraf boyutlandırmak kesinlikle mümkün. Böylelikle, web sitenizdeki tüm fotoğrafların boyutunu otomatik olarak belirleyebilmektesiniz. Dilerseniz şimdi, bu işlemi bir örnek ile daha da iyi anlıyor olacağız.

AYRICA: CSS ile Büyük Küçük Harf Nasıl Yapılır?

CSS Kullanarak Otomatik Fotoğraf Boyutlandırma

Temanızın CSS dosyası içerisine aşağıdaki kodu ekleyin.

.boyutlandirma img {
max-width: 150px;
height: auto;
}

HTML dosyasına ise aşağıdaki gibi bir kod ekleyebilirsiniz.

<div class="boyutlandirma">
<img src="gorsel-linki.png" />
</div>

Bilgi: Kodlarda yer alan "max-width" değerini değiştirerek, genişlik değerini belirleyebilirsiniz.

Not: Otomatik olarak boyutlandırma yapılmış örnek bir fotoğraf ise aşağıda yer almaktadır.